今天很无聊，就接着写轮播图了，需要说明一下，这次的轮播图是在上次随笔中jquery特效（3）—轮播图①（手动点击轮播）和jquery特效（4）—轮播图②（定时自动轮播）的基础上写出来的，也就是本次随笔展示的是手动点击轮播效果、定时自动轮播效果以及鼠标悬浮在图片上面停止轮播的程序，建议想连贯学习的小伙伴把我昨天写的笔记看完后再看这篇文章.

先来看最终的动态效果图：

上面的主要展示效果就是鼠标悬浮时图片停止滚动，截图软件是绿色版，所以展示的效果速度有点快，但大体的效果已经出现了.

一、主体程序

<!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特效（3）—轮播图①（手动点击轮播）笔记说明，我本次随笔重点会在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特效（3）—轮播图①（手动点击轮播）笔记说明，我本次随笔重点会在Jquery程序里面

三、jQuery程序

先说一下鼠标悬浮图片轮播停止的原理：

1、当鼠标悬浮在框架上方时，清除定时器即用clearInterval(timer)关闭定时器，使自动轮播停止

2、当鼠标离开框架上方时，重新启动定时器

3、鼠标的悬浮和离开借助于hover函数

hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

　　 参数:
      over (Function) : 鼠标移到元素上要触发的函数。
      out (Function): 鼠标移出元素要触发的函数。

下面来看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根据被点击的按钮索引值iNow确定

            })

        });

        /*手动点击按钮进行图片轮播代码结束*/

        /*定时自动轮播图片代码开始*/

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

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

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

                iNow=0;

            }

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

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

        /*定时自动轮播图片代码结束*/

        /*鼠标悬浮图片停止轮播代码开始*/

        slideShow.hover(

            function(){

                clearInterval(timer);

            },function(){

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

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

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

                        iNow=0;

                    }

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

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

            }

        );

        /*鼠标悬浮图片停止轮播代码结束*/

})

从上图可以看出开启定时器的代码是重复的，所以这里可以定义一个自动播放的函数autoPlay()来精简代码,经过精简后的代码如下：

/*定时自动轮播图片代码开始*/

        function autoPlay(){

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

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

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

                iNow=0;

            }

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

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

        }

        autoPlay();

 /*定时自动轮播图片代码结束*/

定义完成后不要忘记调用这个函数，即autoPlay();

那么最终版的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根据被点击的按钮索引值iNow确定

            })

        });

        /*手动点击按钮进行图片轮播代码结束*/

        /*定时自动轮播图片代码开始*/

        function autoPlay(){

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

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

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

                iNow=0;

            }

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

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

        }

        autoPlay();

        /*定时自动轮播图片代码结束*/

        /*鼠标悬浮图片停止轮播代码开始*/

        slideShow.hover(

            function(){

                clearInterval(timer);

            },autoPlay

        );

        /*鼠标悬浮图片停止轮播代码结束*/

})

已经把轮播图写的差不多了，基本上满足了我明天项目上的应用,有时间再把轮播图的其他功能完善一下吧,还是周末好，可以自由自在的写代.

jquery特效（5）—轮播图③（鼠标悬浮停止轮播）的更多相关文章

  1. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  2. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  3. 01.轮播图之一 ：scrollView 轮播

    接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...

  4. 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

  5. JS轮播图（网易云轮播图）

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  6. 01.轮播图之三 ： collectionView 轮播

    个人觉得 collection view 做轮播是最方便的,设置下flowlayout 其他不会有很大的变动,没有什么逻辑的代码 let's begin…… 创建自定义的view .h 声明文件 @i ...

  7. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  8. C3属性的轮播图（持续更新）

    天气好冷,都不想写代码.就先写个没有焦点的轮播图,过两天在补全. 用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX() 只做了轮播和 鼠标进入停止轮播 ...

  9. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

随机推荐

  1. luogu P2158 [SDOI2008]仪仗队

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...

  2. CODECHEF Nov. Challenge 2014 Chef & Churu

    @(XSY)[分塊] Hint: 題目原文是英文的, 寫得很難看, 因此翻譯為中文. Input Format First Line is the size of the array i.e. \(N ...

  3. man

    Description n间房子高度不同,Man 要从最矮的房子按照高度顺序跳到最高的房子,你知道房子的顺序,以及Man一次最远可以跳多远,相邻的房子至少有1的距离,房子的宽不计,现在由你安排相邻房子 ...

  4. 开始我的GL离屏渲染绑定[转]

    地址: http://wiki.woodpecker.org.cn/moin/lilin/swig-glBmpContext 呵呵,有了第一次的经验,我们就要开始我们的GL离屏渲染的绑定了. 关 于O ...

  5. Redis安装过程

    Redis在windows下安装过程 学习了:https://www.cnblogs.com/M-LittleBird/p/5902850.html 学习了:http://www.runoob.com ...

  6. 转： 多版本并发控制(MVCC)在分布式系统中的应用 （from coolshell）

    from:  http://coolshell.cn/articles/6790.html 问题 最近项目中遇到了一个分布式系统的并发控制问题.该问题可以抽象为:某分布式系统由一个数据中心D和若干业务 ...

  7. Eclipse 修改字符集

    Eclipse 修改字符集 默认情况下 Eclipse 字符集为 GBK,但现在很多项目采用的是 UTF-8,这是我们就需要设置我们的 Eclipse 开发环境字符集为 UTF-8, 设置步骤如下: ...

  8. Python中的列表、元祖、字典

    一.列表 一组有序项目的集合.可变的数据类型[可进行增删改查] 列表是以方括号"[]"包围的数据集合,不同成员以","分隔. 列表中能够包括不论什么数据类型,也 ...

  9. Android Studio Ndk 编程

    如今开发Android程序基本都已经从Eclipse转到了Android Studio了, 近期项目需求, 须要用到ndk编程, 于是就折腾了一下. 开发环境 Android Studio 1.5.1 ...

  10. web前端面试系列 - 数据结构（两个栈模拟一个队列）

    一. 用两个栈模拟一个队列 思路一: 1. 一个栈s1作为数据存储,另一个栈s2,作为临时数据存储. 2. 入队时将数据压人s1 3. 出队时将s1弹出,并压人s2,然后弹出s2中的顶部数据,最后再将 ...