效果图：

　　

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-4763(kmp+拓展kmp）

    题意:给你一个串,问你满足最大字串既是前后缀,也在字符串除去前后缀的位置中出现过: 思路:我用的是拓展kmp求的前后缀,只用kmp也能解,在字符串2/3的位置后开始遍历,如果用一个maxx保存前2/3 ...

  2. 一、Java多人博客系统-开篇

    作为一个程序员,工作之外的不断学习是必须的.这个项目是我个人课外学习和练手的项目.最开始是一个个人网站.当时发现京东云可以免费部署网站的,就立即写了一个网站,当时就使用jsp技术,可以实现发布博客.评 ...

  3. Nginx 模块分类

    L:34

  4. Ubuntu16.04系统美化、常用软件安装等，长期更新

    Ubuntu16.04系统美化.常用软件安装等,长期更新 IT之家啊 18-09-0915:00 因为我个人偏向于玩VPS.服务器之类的东西,所以一般我都是用CentOS.不过对于桌面版的Linux, ...

  5. Deepfakes：AI换脸技术自制明星XX片

    ps:亮瞎狗眼 去年开始就在国外网站上比较火的项目了,通过Deepfakes技术可以将视频中的人脸换成自己喜欢的明星, 当时就有不少人制作了换脸视频,其中大部分是替换了XX片的女主角. 国外网站Red ...

  6. OneinStack——PHP多版本共存

    前言 我事先安装的是LNMP环境,PHP版本为7.2,但是现在环境需要一个PHP5.6,所以就准备安装个上版本,顺带写个安装教程,写完后我发现了原来有直接安装的命令!所以后面的内容大家可以忽略了!从配 ...

  7. 【XSY2729】欧拉子图 无向图连通性 数学

    题目大意 给你一个\(n\)个点\(m\)条边的无向图(可能有重边),对于这个图的边集的子集(一共有\(2^m\)个),如果其导出的子图的每个联通块内都存在欧拉回路,我们就把答案加上这个子图的边数的平 ...

  8. 【BZOJ3522】【BZOJ4543】【POI2014】Hotel 树形DP 长链剖分 启发式合并

    题目大意 ​ 给你一棵树,求有多少个组点满足\(x\neq y,x\neq z,y\neq z,dist_{x,y}=dist_{x,z}=dist_{y,z}\) ​ \(1\leq n\leq 1 ...

  9. Kindle支持文档类型

    Kindle支持文档类型 Kindle个人文档服务目前只能转换并发送以下类型的文档:Microsoft Word (.doc, .docx) RTF文件(.rtf) HTML(.htm, .html) ...

  10. scrapy简单使用

    #settings.py文件设置 #如果网站中没有robots文件,就不会抓取任何数据 ROBOTSTXT_OBEY = False #设置请求头 DEFAULT_REQUEST_HEADERS = ...