效果图：

　　

GitHub地址：https://github.com/123456abcdefg/Javascript

大家可以下载源码查看。

与前一篇写的轮播图实现的效果一致，这个是用jQuery写的，相对简单一点的吧。

js代码：

    <script src="../jquery-3.3.1.min.js"></script>

    <script>

        var index = 1;

        var newLeft = 0;

        var interval;

        var buttSpan = $(".butt").children();

        function nextPage(next){

            $(buttSpan[index-1]).removeClass("on");

            if(next){

                if(index == 5){

                    index = 1;

                    newLeft = 0;

                }

                else{

                    index ++;

                    newLeft = -600*(index-1);

                }

            }

            else{

                if(index == 1){

                    index = 5;

                    newLeft = -2400;

                }

                else{

                    index --;

                    newLeft = -600*(index-1);

                }

            }

            $(".list").css("left",newLeft + 'px');

            $(buttSpan[index-1]).addClass("on");

        }

        function autoNextPage(){

            interval = setInterval(function(){

                nextPage(true);

            },"3000");

        }

        autoNextPage();

        $(".container").mouseover(function(){

            clearInterval(interval);

            $(".arrow").css("display","block");

        });

        $(".container").mouseout(function(){

            autoNextPage();

            $(".arrow").css("display","none");

        });

        $(".left").click(function(){

            nextPage(false);

        });

        $(".right").click(function(){

            nextPage(true);

        });

        function clickButt(){

            for(var i = 0;i<5;i++){

                $(buttSpan[i]).click(function(){

                    $(buttSpan[index-1]).removeClass("on");

                    index = $(this).attr("index")-1;

                    nextPage(true);

                });

            }

        }

        clickButt();

    </script>

　　

主要包括一下几个部分：

1.一个轮播的方法（left）：nextPage(next);

index , newLeft , left

2.自动轮播：autoNextPage();

3.鼠标放到container上图片及按钮不再播放

4.鼠标点击左右方向，可以向左/向右轮播。（调用nextPage()方法）

5.点击下面几个按钮，可以切换到相应的图片（index），并且按钮样式也相应改变。

这个是相对于上面较简单的另一种写法：

点击相应的按钮，按钮样式改变，其同胞元素恢复之前。

获取到当前index值，调用play(true)方法，按钮对应的图片改变。

完整代码：

<html>

<head>

<meta charset="utf-8" />

<title>1</title>

<style>

    *{

        padding:0;

        margin:0;

    }

    .container{

        width:600px;

        height:400px;

        overflow:hidden;

        position:relative;

        margin:0 auto;

    }

    .list{

        width:3000px;

        height:400px;

        position:absolute;

    }

    .list img{

        width:600px;

        height:400px;

        float:left;

    }

    .butt{

        width:300px;

        height:20px;

        position:absolute;

        left:230px;

        bottom:20px;

        cursor:pointer;

    }

    .butt span{

        width:20px;

        height:20px;

        display:inline-block;

        border:1px solid brown;

        border-radius:50%;

        color:brown;

        z-index:1;

        font-size:20px;

        font-weight:bold;

        text-align:center;

    }

    .arrow{

        width:30px;

        height:30px;

        position:absolute;

        top:200px;

        color:black;

        background-color:white;

        z-index:1;

        font-size:30px;

        font-weight:bold;

        text-align:center;

        text-decoration:none;

        display:none;

    }

    .left{

        left:10px;

    }

    .right{

        right:10px;

    }

    .on{

        background-color:black;

    }

</style>

</head>

<body>

    <div class="container">

        <div class="list" style="left:0px;">

            <img src="../img/1.jpg"></img>

            <img src="../img/2.jpg"></img>

            <img src="../img/3.jpg"></img>

            <img src="../img/4.jpg"></img>

            <img src="../img/5.jpg"></img>

        </div>

        <div class="butt">

            <span index="1" class="on">1</span>

            <span index="2">2</span>

            <span index="3">3</span>

            <span index="4">4</span>

            <span index="5">5</span>

        </div>

        <a href="#" class="arrow left">&lt;</a>

        <a href="#" class="arrow right">&gt;</a>

    </div>

    <script src="../jquery-3.3.1.min.js"></script>

    <script>

        var index = 1;

        var newLeft = 0;

        var interval;

        var buttSpan = $(".butt").children();

        function nextPage(next){

            $(buttSpan[index-1]).removeClass("on");

            if(next){

                if(index == 5){

                    index = 1;

                    newLeft = 0;

                }

                else{

                    index ++;

                    newLeft = -600*(index-1);

                }

            }

            else{

                if(index == 1){

                    index = 5;

                    newLeft = -2400;

                }

                else{

                    index --;

                    newLeft = -600*(index-1);

                }

            }

            $(".list").css("left",newLeft + 'px');

            $(buttSpan[index-1]).addClass("on");

        }

        function autoNextPage(){

            interval = setInterval(function(){

                nextPage(true);

            },"3000");

        }

        autoNextPage();

        $(".container").mouseover(function(){

            clearInterval(interval);

            $(".arrow").css("display","block");

        });

        $(".container").mouseout(function(){

            autoNextPage();

            $(".arrow").css("display","none");

        });

        $(".left").click(function(){

            nextPage(false);

        });

        $(".right").click(function(){

            nextPage(true);

        });

        function clickButt(){

            for(var i = 0;i<5;i++){

                $(buttSpan[i]).click(function(){

                    $(buttSpan[index-1]).removeClass("on");

                    index = $(this).attr("index")-1;

                    nextPage(true);

                });

            }

        }

        clickButt();

    </script>

</body>

</html>

参考博客：https://www.cnblogs.com/lihuijuan/p/9486051.html

用jQuery写的轮播图的更多相关文章

  1. 记录一下自己用jQuery写的轮播图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  4. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  5. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  7. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  8. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  9. 用 JS 写 （轮播图 / 选项卡 / 滑动门）

    页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...

随机推荐

  1. hdu-3068（最长回文子串-manacher）

    题意:求一个字符串#include<iostream>#include<algorithm>#include<cstring>using namespace std ...

  2. [BZOJ 3498] [PA 2009] Cakes

    Description \(n\) 个点 \(m\) 条边,每个点有一个点权 \(a_i\). 对于任意一个三元环 \((i,j,k)(i<j<k)\),它的贡献为 \(\max(a_i, ...

  3. js弹框的3种方法

    js的三种弹框的方法 1.第一种 :  alert("1"); 2.第二种 :  window.open("Tests2.html"); var r = con ...

  4. 洛谷P5020货币系统

    题目 这个题打眼看上去可能是一个数论或者DP,其实我们可以简化一下题意,即 给定一个集合\(\alpha\),找到几个数使得这几个数可以拼凑起来这个集合里所有的数,且需要使这些数的个数最小. 这样这个 ...

  5. C#中equal与==的区别

    C#中equal与==的区别 来源 https://www.cnblogs.com/dearbeans/p/5351695.html C#中,判断相等有两种方式,一种是传统的==操作,一种是objec ...

  6. 【cf849ABC】

    849A - Odds and Ends 问能否将序列划分为奇数个长度奇数的奇数开头奇数结尾的子区间. 一开始想dp..不过没必要. const int N=201000; int n,a[N]; i ...

  7. 【CodeForces 730H】Car Repair Shop

    BUPT 2017 summer training (for 16) #1F 题意 依次有n (1 ≤ n ≤ 200) 个车要修理,每个车希望在s[i]时刻开始修理,时长d[i],如果s[i]后面没 ...

  8. FlatList

    FlatList 之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过An ...

  9. [APIO2013]机器人(斯坦纳树)

    题目描述 VRI(Voltron 机器人学会)的工程师建造了 n 个机器人.任意两个兼容的机 器人站在同一个格子时可以合并为一个复合机器人. 我们把机器人用 1 至 n 编号(n ≤ 9).如果两个机 ...

  10. 解决忘记mysql中的root用户密码问题

    如果忘了数据库中的root密码,无法登陆mysql. 解决步骤: 1. 使用“--skip-grant-tables”启动数据库 ~]#systemctl stop mysql ~]#mysqld_s ...