周末出去逛完街,就回公司好好地研究代码了，也算是把定时自动轮播程序写出来了，特意说明一下，这次的轮播图是在昨天随笔中jquery特效（3）—轮播图①（手动点击轮播）的基础上写出来的，也就是本次随笔展示的是手动点击轮播效果以及定时自动轮播效果的程序，建议想连贯学习的小伙伴把我昨天写的笔记看完后再看这篇文章.

下面来看看我做的最终定时自动轮播效果以及手动点击轮播效果：

对于上面的展示动画速度比较快的原因是因为我的截图软件是绿色版，免费的~~~你们懂得，就是卡卡的，真正的效果比这个速度慢，而且还是匀速，可以商用~~~所以上面的展示动画只能当做完成效果的参考，不要太在乎它的展示速度.

一、主体程序

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>轮播图①（手动点击轮播）</title>

        <link type="text/css" rel="stylesheet" href="css/layout.css"  />

    </head>

    <body>

        <div class="slideShow">

            <!--图片布局开始-->

            <ul>

                <li><a href="#"><img src="img/picture01.jpg" /></a></li>

                <li><a href="#"><img src="img/picture02.jpg" /></a></li>

                <li><a href="#"><img src="img/picture03.jpg" /></a></li>

                <li><a href="#"><img src="img/picture04.jpg" /></a></li>

            </ul>

            <!--图片布局结束-->

            <!--按钮布局开始-->

            <div class="showNav">

                <span class="active">1</span>

                <span>2</span>

                <span>3</span>

                <span>4</span>

            </div>

            <!--按钮布局结束-->

        </div>

        <script src="js/jquery-1.11.3.js"></script>

        <script src="js/layout.js"></script>

    </body>

</html>

额，上面的主体程序和昨天的写的笔记没有区别，未做任何修改,感兴趣的可以看昨天的笔记说明，我本次随笔重点会在Jquery程序里面

二、CSS样式

*{

    margin: 0;

    padding: 0;

}

ul{

    list-style: none;

}

.slideShow{

    width: 346px;

    height: 210px;     /*其实就是图片的高度*/

    border: 1px #eeeeee solid;

    margin: 100px auto;

    position: relative;

    overflow: hidden;    /*此处需要将溢出框架的图片部分隐藏*/

}

.slideShow ul{

    width: 2000px;

    position: relative;     /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/

}

.slideShow ul li{

    float: left;     /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/

    width: 346px;

}

.slideShow .showNav{     /*用绝对定位给数字按钮进行布局*/

    position: absolute;

    right: 10px;

    bottom: 5px;

    text-align:center;

    font-size: 12px;

    line-height: 20px;

}

.slideShow .showNav span{

    cursor: pointer;

    display: block;

    float: left;

    width: 20px;

    height: 20px;

    background: #ff5a28;

    margin-left: 2px;

    color: #fff;

}

.slideShow .showNav .active{

    background: #b63e1a;

}

嘿嘿，上面的样式程序也是和昨天的写的笔记没有区别，未做任何修改,感兴趣的可以看昨天的笔记说明，我本次随笔重点会在Jquery程序里面

三、jQuery程序

首先说一下定时自动轮播的原理：

1、首先得开一个定时器，假设定时器的时间设置为2000ms，也就是2S定时器执行一次操作

2、定时器每隔2S执行的操作就是模拟按次序点击数字按钮，也就是触发click事件，让图片左移

先来看大体效果实现的jQuery代码一：

        var timer=null;   //定时器返回值，主要用于关闭定时器

        var iNow=0;      //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0

        timer=setInterval(function(){        //打开定时器

            iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片

            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click事件

        },2000);   //2000为轮播的时间

上面的程序可以实现每隔2S图片的轮播效果，但是轮播到最后一张图的时候会停止，因为没有判断iNow是否到达最后一张图，所以有了下面的代码二：

　　　　 var timer=null;   //定时器返回值，主要用于关闭定时器

        var iNow=0;      //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0

        timer=setInterval(function(){        //打开定时器

            iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片

            if(iNow>showNumber.length-1){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始

                iNow=0;

            }

            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click

        },2000);   //2000为轮播的时间

所以jQuery程序的完整代码程序如下：

$(document).ready(function(){

    var slideShow=$(".slideShow"),     //获取最外层框架的名称

        ul=slideShow.find("ul"),

        showNumber=slideShow.find(".showNav span"),//获取按钮

        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度

        var timer=null;   //定时器返回值，主要用于关闭定时器

        var iNow=0;      //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0

        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件

            $(this).addClass("active").siblings().removeClass("active");   //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉

            var index=$(this).index();  //获取哪个按钮被点击，也就是找到被点击按钮的索引值

            ul.animate({

                "left":-oneWidth*iNow,   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定

            })

        });

        timer=setInterval(function(){        //打开定时器

            iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片

            if(iNow>showNumber.length-1){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始

                iNow=0;

            }

            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click

        },2000);   //2000为轮播的时间

})

上面的注释写的很详细了，主要是为了方便想学习的小伙伴看，但是实际上我写程序不会注释的那么详细，都是很简单的内容啦，看到这里你可能以为jQuery程序就完了，那就大错特错了，因为自动轮播效果是正确的，但是手动点击时就会出错，我特意做了一段Gif动画展示出错的效果：

看到上面的效果你就会忽然大悟，图片自动轮播时，你就算点击按钮它也只是附和你一下，跳转到你点击的按钮，但是仅仅持续一会还是按它轮播的次序，不理会你点击的按钮后应该走的轮播次序，至于原因嘛,是因为手动点击时index的值未赋值给定时器的图片索引iNow，这样iNow就无法存储你点击的按钮索引值，也就是不知道你点击的哪个按钮，既然知道了原因，那么下面就需要进行修改了,

修改完成后的jQuery程序最终版就是：

$(document).ready(function(){

    var slideShow=$(".slideShow"),     //获取最外层框架的名称

        ul=slideShow.find("ul"),

        showNumber=slideShow.find(".showNav span"),//获取按钮

        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度

        var timer=null;   //定时器返回值，主要用于关闭定时器

        var iNow=0;      //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0

        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件

            $(this).addClass("active").siblings().removeClass("active");   //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉

            var index=$(this).index();  //获取哪个按钮被点击，也就是找到被点击按钮的索引值

            iNow=index;

            ul.animate({

                "left":-oneWidth*iNow,   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定

            })

        });

        timer=setInterval(function(){        //打开定时器

            iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片

            if(iNow>showNumber.length-1){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始

                iNow=0;

            }

            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click

        },2000);   //2000为轮播的时间

})

总算写完了,很有成就感，下次随笔准备写鼠标悬浮在轮播图上方时图片停止轮播，鼠标移走后图片接着进行轮播的代码.

本人才疏学浅，随笔也是随意写写的，可能有错误的地方，大神看到可以指出来哦,我保证不打死你.

jquery特效（4）—轮播图②（定时自动轮播）的更多相关文章

  1. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  2. vue-music 使用better-scroll遇到轮播图不能自动轮播

    根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播 这是因为,better-scroll发布新版本之后,参数设置发生改变 这是旧版本: ...

  3. swiper手滑动轮播图后自动轮播失效解决办法

    设置autoplay:true之后,再设置 autoplay:{disableOnInteraction: false} --------------------------------------- ...

  4. 自定义完美的ViewPager 真正无限循环的轮播图

    网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢 ...

  5. vue-cli中轮播图vue-awesome-swiper使用方法

    1 npm 安装 npm install vue-awesome-swiper --save 2在所用的组件中引入 import 'swiper/dist/css/swiper.css' import ...

  6. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

  7. jquery特效（5）—轮播图③（鼠标悬浮停止轮播）

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  8. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  9. js 滚轮事件 滚轮焦点图（轮播图）

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

随机推荐

  1. Codeforces 691F Couple Cover

    可以暴力预处理出每一种小于3000000的乘积有几种.询问的时候可以用总的方案减去比p小的有几种o(1)输出. #pragma comment(linker, "/STACK:1024000 ...

  2. Tavas and Malekas

    题面 题目描述 给你两个字符串a和b,告诉所有你b在a中一定匹配的位置,求有中不同的字符串a.a的长度为n,b的长度为m,一定匹配的位置有p个.若b在a中的一定匹配的位置为x,说明a[x-x+m-1] ...

  3. DVBS/S2在数字电视系统中的应用 三 （LNB介绍）

    DVBS/S2在数字电视系统中的应用 三 (LNB介绍) 老谢在前面两篇文章中(例如以下).都有提到LNB这一概念. DVBS/S2在数字电视系统中的应用 一 (DVBS/S2接收系统Block Di ...

  4. 手把手教你安装Hbase,一次成功！

    安装环境: OS: Centos 6.5 JDK: jdk1.6.0_18 Hadoop: hadoop-0.20.2 Hbase: hbase-0.90.5 安装准备: 1.       Jdk环境 ...

  5. 最好的10个移动 Web 应用程序开发框架

    在近期几年里,移动互联网快速发展.市场潜力巨大. 继计算机.互联网之后,移动互联网正掀起第三次信息技术革命的浪潮,新技术.新应用不断涌现.今天这篇文章向大家推荐10大优秀的移动Web开发框架.帮助开发 ...

  6. vue 给组件绑定原生事件

    有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...

  7. ffmpeg 跟我学 视频教程

    最近一段时间找时间录制了一些Ffmpeg视频教程,还有录制完毕,会持续更新,内容会包含Ffmeg保存文件,网络流转发, 编码,解码,播放器制作,以及服务端搭建等等,适合初学者,有需要的朋友的可以关注: ...

  8. HDU-3681-Prison Break(BFS+状压DP+二分)

    Problem Description Rompire is a robot kingdom and a lot of robots live there peacefully. But one da ...

  9. __del__删除方法

    class dog: def __del__(self): print("删除机制被调用了...") dog1 = dog() del dog1 #在这里是先删除掉了,所以就去上面 ...

  10. 小printf的故事：什么是真正的程序员？

    http://kb.cnblogs.com/page/570194/ 作者: 削微寒  来源: 博客园  发布时间: 2017-06-06 10:03  阅读: 33004 次  推荐: 98   原 ...