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

时间：2014-07-13 22:26:46 阅读：412 评论：0 收藏：0 [点我收藏+]

制作图片轮播，可以说是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使图片横排。

bubuko.com,布布扣

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

普通写法：

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

    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的执行间隔时间减去动画执行过程所用时间即为图片的切换延迟时间。效果：

bubuko.com,布布扣

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

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

效果：

bubuko.com,布布扣

接下来在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。整个图片列表自然会右移，显示上一张。

bubuko.com,布布扣

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

bubuko.com,布布扣

整理后的代码，方便大家一次性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);
    }