周末出去逛完街,就回公司好好地研究代码了，也算是把定时自动轮播程序写出来了，特意说明一下，这次的轮播图是在昨天随笔中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. SPOJ GSS系列（数据结构维护技巧入门）

    题目链接 GSS $GSS1$ 对于每个询问$l$, $r$,查询$a_{l}$, $a_{l+1}$, $a_{l+2}$, ..., $a_{r}$这个序列的最大字段和. 建立线段树,每个节点维护 ...

  2. [Python Cookbook] Numpy Array Joint Methods: Append, Extend & Concatenate

    数组拼接方法一 思路:首先将数组转成列表,然后利用列表的拼接函数append().extend()等进行拼接处理,最后将列表转成数组. 示例1: import numpy as np a=np.arr ...

  3. 1007 Maximum Subsequence Sum

    Given a sequence of K integers { N​1​​, N​2​​, ..., N​K​​ }. A continuous subsequence is defined to ...

  4. LINUX___的常用几个快捷键

    linux下:ctrl-c 发送 SIGINT 信号给前台进程组中的所有进程.常用于终止正在运行的程序.ctrl-z 发送 SIGTSTP 信号给前台进程组中的所有进程,常用于挂起一个进程.ctrl- ...

  5. Python 实现二维码生成和识别

    今天突然想给自己自己做个头像,然后还是二维码的形式,这样只要扫一扫就可以访问我的主页.然后就开始自己的苦逼之路... 其实实现二维码java,c#,C++等都可以实现:由于自己正在学python,所以 ...

  6. 在A页面刷新父框架中的B页面.(window.parent.?.location="")

    window.parent.leftFrame.location='left.jsp?menuid='+menu.id+'&menuname='+menu.title;

  7. 零基础学python-3.7 还有一个程序 python读写文本

    今天我们引入另外一个程序,文件的读写 我们先把简单的程序代码贴上.然后通过我们多次的改进.希望最后可以变成一个简单的文本编辑器 以下是我们最简单的代码: 'crudfile--读写文件' def re ...

  8. 修改host文件原理 localhost，127.0.0.1之间有什么区别

    修改host文件原理http://www.zhihu.com/question/19782572 localhost与127.0.0.1的区别是什么 相信有人会说是本地ip,曾有人说,用127.0.0 ...

  9. error MSB8011: 未能注冊输出。请尝试启用“逐用户重定向”

    初试MFC就遇到困难了.vs2010创建一个MFC ActiveX控件项目. 什么都还没做呢,就出现故障了? 郁闷呀.! ! 1>C:\Program Files\MSBuild\Microso ...

  10. java中使用opencv

    Java + opencv学习:在Eclipse下配置基于Java的OpenCV开发环境 2016-04-08 17:43 6491人阅读 评论(0) 收藏 举报  分类: OpenCV学习(10)  ...