图片轮播，信手拈来（jquery）

制做图片轮播，能够说是js或者jquery学习者应该掌握的技巧。但惭愧的是本菜以前一直只知其一;不知其二，这回抽了半天多总结了下分享给你们。虽然标题比较吹牛，但目的是但愿你们看了以后制做图片轮播会很是迅速。

首先申明几点：

1.既然使用了jquery，制做方法就再也不是最基础的那种将图片列表的位置一直改变，好比：切第二张图片left:-100px，切第三种图片left:-200px，切第四张图片left:-300px。

这种方法在从最后一张图回第一张图时会快速倒回去，搓爆了。

2.制做目标是轮播基本的三个功能：1）自动播放 2）光标移入中止播放，移开继续播放 3）按钮操做前/后张图片切换

3.制做图片轮播的方法网上很是多，个人写法不必定是最简单的，但确实比较少，思路也算清晰。

 

准备工做：

1.body中写入以下内容：

 <div id="container">
        <ul id="picList">
            <li><img src="images/1.png"></li>
            <li><img src="images/2.png"></li>
            <li><img src="images/3.png"></li>
            <li><img src="images/4.png"></li>
            <li><img src="images/5.png"></li>
            <li><img src="images/6.png"></li>
            <li><img src="images/7.png"></li>
        </ul>
  </div>

其中外部div表示咱们须要的“相框”，ul列表便是图片列表

2.将相框尺寸设为单张图片的尺寸；ul宽度设为图片列表的总宽度，能够在CSS中设置，不过写在javascript中动态添加也比较好；

   var picArr=$("#picList li");
   $("#picList").css("width",picArr.length*120);

最后让ul下的li float:left使图片横排。

完成以后效果如上，淡绿色的边框部分就是咱们的“相框”。

 

普通写法：

这种写法我的认为比较简单，也比较实用。后面有个高级点的写法，虽然唬人但也麻烦一些。

    function next(){
        $("#picList li:first-child").animate({
            marginLeft:"-120px"
        },1000,function(){
            var temp=$(this).clone();
            $(this).remove();
            temp.css({marginLeft:"0"});
            $("#picList").append(temp);
        });
    }

解释下上面的代码，本例中单张图片宽120px高190px。

这个next函数即向后播的函数，首先jquery中的animate自定义动画使图片列表的第一列左移120px，用时1000毫秒，左移完成后执行接下来的函数：

将图片列表的第一列克隆存在名为temp的变量中，将第一列删除。此时克隆后的temp依然保持着以后marginLeft:"-120px"的css样式，先将其回0，不然在将插到队尾时会盖在前一张上。

最后将克隆后的列经过append()插入队尾。

使用setInterval循环执行next函数：

var intervalObj=window.setInterval(next,2000);

这里之全部用了setInterval是为了以后鼠标放上去后能中止轮播，setInterval的执行间隔时间减去动画执行过程所用时间即为图片的切换延迟时间。效果：

将setInterval赋给全局变量intervalObj为了接下来的中止功能：

    $("#container").mouseover(function(){
        window.clearInterval(intervalObj);
    });
    $("#container").mouseout(function(){
        intervalObj=window.setInterval(next,2000);
    });

效果：

接下来在id为container的div中添加按钮：

     <button onclick="prev()" id="goLeft">←</button>
     <button onclick="next()" id="goRight">→</button>

向右的按钮即执行上面所写的next函数，把两个按钮加在div中有个好处就是：以前咱们是在div上加的mouseover事件，也就是说当咱们想要点击切换上下张时自动播放也会中止，不会和咱们的操做起冲突。

向左翻的函数：

    function prev(){
        var temp=$("#picList li:last-child").clone();
        $("#picList li:last-child").remove();
        temp.css({marginLeft:"-120px"});
        $("#picList").prepend(temp);
        $("#picList li:first-child").animate({
            marginLeft:"0"
        },1000);
    }

这里和向右的函数稍微有些区别，咱们得在图片列表右移以前先完成克隆。

首先将图片列表的最后一列克隆，并将最后一列移除。将克隆后的temp样式设为-120px，不然插到队头时会盖住第一张。

将克隆的temp经过prepend插入队头，注意此时图片列表的第一张再也不是原始的第一张而是刚才插到队头的temp，因为temp的marginLeft为-120px，将其变为0。整个图片列表天然会右移，显示上一张。

最后将“相框”的overflow设为hidden，一个较完整的轮播就完成了：

整理后的代码，方便你们一次性COPY：

    var intervalObj=window.setInterval(next,2000);
    var picArr=$("#picList li");
    $("#picList").css("width",picArr.length*120);
    function next(){
        $("#picList li:first-child").animate({
            marginLeft:"-120px"
        },1000,function(){
            var temp=$(this).clone();
            $(this).remove();
            temp.css({marginLeft:"0"});
            $("#picList").append(temp);
        });
    }
    function prev(){
        var temp=$("#picList li:last-child").clone();
        $("#picList li:last-child").remove();
        temp.css({marginLeft:"-120px"});
        $("#picList").prepend(temp);
        $("#picList li:first-child").animate({
            marginLeft:"0"
        },1000);
    }
    $("#container").mouseover(function(){
        window.clearInterval(intervalObj);
    });
    $("#container").mouseout(function(){
        intervalObj=window.setInterval(next,2000);
    });

 

进阶写法：

原理基本是同样的，只是这回在ul中须要加入两个li，分别装第一张、第二张图片便可。

    <ul id="picList">
         <li><img src="images/1.png"></li>
         <li><img src="images/2.png"></li>
    </ul>

在js中将全部的图片地址装入数组中：

    var srcArr=['images/1.png','images/2.png','images/3.png','images/4.png','images/5.png','images/6.png','images/7.png']

定义全局变量picNo=1，在以前所写的next及prev函数中加入判断条件：

    function next(){
        picNo++;
        if(picNo==7){
            picNo=0;
        }else if(picNo==8){
            picNo=1;
        }
        $("#picList li:first-child").animate({
            marginLeft:"-120px"
        },1000,function(){
            var temp=$(this).clone();
            $(this).remove();
            temp.css({marginLeft:"0"}).children().attr("src",srcArr[picNo]);
            $("#picList").append(temp);
        });
    }
    function prev(){
        picNo--;
        if(picNo<1){
            picNo=7;
        }
        var temp=$("#picList li:last-child").clone();
        $("#picList li:last-child").remove();
        temp.css({marginLeft:"-120px"}).children().attr("src",srcArr[picNo-1]);
        $("#picList").prepend(temp);
        $("#picList li:first-child").animate({
            marginLeft:"0"
        },1000);
    }

这里picNo做用是提供图片地址数组的下标索引，这部分有点难讲清楚，我也是当初测试了好久才找到了规律。

先看next函数，picNo初值为1，第一次执行next函数时加1变为2，也就是说在接下来要插入的图片应该为第三张图片，由于第1、二张已经存在了。

if(picNo==7){picNo=0}表示向下切换到头时，添加第一张图片地址。

else if(picNo==8){picNo=1}，加这句是由于在切换时发现个BUG，在从第一张倒切到最后一张，再从最后一张切回第一张时，新插入的不是第二张，而仍是第一张。

再看prev函数，因为这里要插入的图片地址是前一张，因此在最后srcArr的下标索引应为picNo-1。

。。。我讲都讲晕了，看不懂就看不懂吧，直接拿去用吧。。。

上效果：

总的来讲，这种写法上加入了判断会稍麻烦点，并且若是网页没有刷新好或者点击过快很容易出现图片顺序错乱。“炫技”的成份比较重，没有第一种作法好用。

 

感谢您的浏览，也感谢每个给本菜提出意见的人。