用jQuery和原生js实现图片左右轮播 - 快车库

实现一个轮播图的功能

图片数量及URL均在HTML中写好
可以配置轮播的顺序（正序、逆序）、是否循环、间隔时长
图片切换的动画流畅
在轮播图下方自动生成对应图片的小点，点击小点，轮播图自动动画切换到对应的图片

大致思路：

将图片设为向左浮动，再通过jQuery中animate函数，左右滑动显示图片，使用setInterval()定时函数控制循环，间隔时长

思路实现：

html结构：

 
<div class="showbox">
        <div class="imagebox"> //放置图片
            <img src="image/1.jpg" alt="1.jpg">
            <img src="image/2.jpg" alt="2.jpg">
            <img src="image/3.jpg" alt="3.jpg">
            <img src="image/4.jpg" alt="4.jpg">
        </div>
        <div class="icobox"> //放置图标
            <pan rel="0" class="active">0</span>
            <span rel="1">1</span>
            <span rel="2">2</span>
            <span rel="3">3</span>
        </div>
    </div>

css:


.showbox{
    position: relative;
    height: 300px;
    width: 570px;
    overflow: hidden;
    border: 10px solid #eee;
    background-color: #eee;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}

.imagebox{
    position: relative;
    height: 270px;
    width: 570px;
    top: 0;
    left: 5px;
    overflow: hidden; 
}

.imagebox img{
    display: block;
    width: 570px;
    height: 270px;
    float: left;

}

.icobox{
    position: absolute;
    border: none;
    width: 120px;
    height: 12px;
    left: 220px;
    bottom: 10px;
    text-align: center;
    line-height: 40px;
    overflow: hidden;
}

.icobox span{
    background: url("../image/ico.png") 0px 0px no-repeat;
    width: 12px;
    height: 12px;
    cursor: pointer;
    float: left;
    margin-left: 3px;
}

.icobox span.active{
    background: url("../image/ico.png") 0px -12px no-repeat;
    cursor: default;
}

javascript:


$(document).ready(function() {
    var imagebox=$(".showbox").children('.imagebox')[0],//获得图片容器
        icobox=$(".showbox").children('.icobox')[0],//获得图标容器
        ico=$(icobox).children('span'),//获得图标数组
        imagenum=$(imagebox).children().size(),//获得图片数量
        imageboxWidth=$(imagebox).width(),//获得图片容器的宽度
        imagewidth=imageboxWidth*imagenum,//获得图片的总宽度
        activeID = parseInt($($(icobox).children(".active")[0] ).attr("rel")),//获得激活的图标ID
        nextID=0,//下一个图标的ID
        intervalID,//setInterval()函数的ID
        delaytime=4000,//延迟的时间
        speed=700;//执行速度
        $(imagebox).css({'width' : imagewidth + "px"});

        var rotate=function(clickID) { //图片滑动函数
            if (clickID+1){
                nextID=clickID;
            }else{
                nextID=(activeID+1)%4;
            };
            $(ico[activeID]).removeClass('active');
            $(ico[nextID]).addClass('active');
            $(imagebox).animate({left:"-"+nextID*imageboxWidth+"px"}, speed);//jQuery中的animate函数
            activeID=nextID;
        }

        intervalID=setInterval(rotate,delaytime);//循环函数

        $.each(ico, function(index, val) {
            $(this).click(function(event) {
                clearInterval(intervalID);//清楚之前的定时任务
                 var clickID = index;
                 rotate(clickID);//运行一次带参数的rotate函数
                 intervalID = setInterval(rotate,delaytime);
            });
        });
});

注意：

给容器设置overflow:hidden十分重要
点击小圆点时，一定要清除上一次的定时器，重新开始定时器时，要给intervalID重新赋值
imagebox的宽度要和image的宽度相等，否则循环显示时，就会出现box中有一大一小两张图片

待改进：

从最后一张图片到第一张图片时，要经历中间所有的图片，若能实现单向循环，最后一张图片右滑到第一张图片。

改进

将第一张图片用animate将其宽度变为0，放到最后img列表的最后一位，这样能保证是一个方向，不过图片宽度是缩减为0，看起来效果也不是很好

代码改动如下：

setInterval(function(){
                $('.imagebox').append($('.imagebox img').first());
                $('.imagebox img').last().css({'width' :  "570px"});
                $('.imagebox img').first().animate({'width':'0px'},1000);
            },3000)

简单demo如下：
https://jsfiddle.net/donqi/20yxy062/1/embedded/

说明

用上面这种办法横向滚动效果不太好，但是纵向效果挺好，下面是纵向滚动的demo：
https://jsfiddle.net/donqi/87qqjm4z/