jquery实现图片轮播

写了一个轮播图练练手，先写了一个手动点击轮播的轮播图，随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等,不能找借口放松自己，原地踏步也算后退.
下面来看看最终做的手动点击轮播效果：

原理说明

（1）首先是轮播图的架构，我采用了一个最外边的大div包住两个小div，一个小div里面放四张图片，另一个小div里面放四个数字按钮
（2）对最外边的大div设置的宽度为图片的宽度，超出大div宽度的都需要隐藏，但是对于盛放图片的小div设置宽度为2000px，大一点方便四张图左浮动布局
（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>

上面布局我已经在原理中说明了，感兴趣的自己看原理.

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;
}

上面样式我已经备注出来很重要的地方了，相信有基础的很容易看懂，刚开始我在.slideShow ul样式里面忘了写position: relative;导致后面的jquery程序图片一直无法移动，耽误了很长时间才找出这个错误，希望大家可以注意这个地方.

手动轮播图的jquery程序

$(document).ready(function(){
    var slideShow=$(".slideShow"),     //获取最外层框架的名称
        ul=slideShow.find("ul"),      
        showNumber=slideShow.find(".showNav span"),//获取按钮
        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度
        
        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件      
            $(this).addClass("active").siblings().removeClass("active");   //按钮被点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
            var index=$(this).index();  //获取哪个按钮被点击，也就是找到被点击按钮的索引值
            ul.animate({
                "left":-oneWidth*index,   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
            })
        })
})

上面只是手动点击时的轮播，但是想进一步实现定时轮播，下面来看一下分析

定时轮播图的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程序就完了，那就大错特错了，因为自动轮播效果是正确的，但是手动点击时就会出错，图片自动轮播时，你就算点击按钮它也只是附和你一下，跳转到你点击的按钮，但是仅仅持续一会还是按它轮播的次序，不理会你点击的按钮后应该走的轮播次序，至于原因嘛,是因为手动点击时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为轮播的时间
})

来看一下最终实现的效果

总算写完了,很有成就感，但是鼠标悬浮在轮播图上方时图片停止轮播，鼠标移走后图片接着进行轮播的代码还是要研究一下，毕竟PC端很常见。

鼠标悬浮轮播图暂停

先说一下鼠标悬浮图片轮播停止，鼠标移走图片轮播开始的原理：
1、当鼠标悬浮在框架上方时，清除定时器即用clearInterval(timer)关闭定时器，使自动轮播停止
2、当鼠标离开框架上方时，重新启动定时器
3、鼠标的悬浮和离开借助于hover函数

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

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

下面来看jQuery程序：

/*定时自动轮播图片代码开始*/
        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
        );
        /*鼠标悬浮图片停止轮播代码结束*/
})