jQuery 仿写京东轮播广告图-阿里云开发者社区

基本样式：

HTML代码：

<div class="container">

    <div class="list">

        <!--轮播广告图-->

        <ul class="listImg clearfix" style="left:-790px;">

            <li><a href="#"><img src="img/6.jpg" alt="图片六"></a></li>

            <li><a href="#"><img src="img/1.jpg" alt="图片一"></a></li>

            <li><a href="#"><img src="img/2.jpg" alt="图片二"></a></li>

            <li><a href="#"><img src="img/3.jpg" alt="图片三"></a></li>

            <li><a href="#"><img src="img/4.jpg" alt="图片四"></a></li>

            <li><a href="#"><img src="img/5.jpg" alt="图片五"></a></li>

            <li><a href="#"><img src="img/6.jpg" alt="图片六"></a></li>

            <li><a href="#"><img src="img/1.jpg" alt="图片一"></a></li>

        </ul>

        <!--中间的6个小按钮-->

        <ul class="buttons clearfix">

            <li class="active"><span index="1"></span></li>

            <li><span index="2"></span></li>

            <li><span index="3"></span></li>

            <li><span index="4"></span></li>

            <li><span index="5"></span></li>

            <li><span index="6"></span></li>

        </ul>

        <!--左右点击按钮-->

        <a href="#" class="arrow" id="prev">&lt;</a>

        <a href="#" class="arrow" id="next">&gt;</a>

    </div>

</div>

CSS代码：

*{margin:0; padding:0;}

ul{list-style:none;}

a{text-decoration:none;}

.clearfix{zoom:1;}

.clearfix:after{display:block; content:''; clear: both;}

.container{position:relative; width:790px; height:340px; margin:100px auto; overflow:hidden;}

.listImg{position:absolute; width:6320px; height:340px;}

.listImg li{float:left;}

.listImg li a img{width:100%;}
/*箭头样式*/

.arrow{ width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,.3); color:#fff; font-size: 2em;

        z-index:100; cursor:pointer; position:absolute; top:40%; display:none;
}

.arrow:hover{background:rgba(0,0,0,0.6);}

#prev{left:20px;}

#next{right:20px;}

.container:hover .arrow{display:block;} /*鼠标进入轮播图才显示两个按钮*/
/*小按钮样式*/

.buttons{position:absolute; bottom:20px; left:45%; z-index:100;}

.buttons li{float:left; margin-right:10px;}

.buttons li span{display:block; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer;}

.buttons li.active span{background:#f00;}

第一步：点击左右箭头实现图片左右滚动

每张图片的宽度是790px，点击左箭头时，图片向左移动，.listImg的left值会减790px；点击右箭头时，图片向右移动，.listImg的left值会加790px

//点击左箭头

$('#prev').click(function(e){

    e.preventDefault();

    var left = parseInt($('.listImg').css('left'))-790;

    console.log(left);

    $('.listImg').css('left', left);
});
//点击右箭头

$('#next').click(function(e){

    e.preventDefault();

    var left = parseInt($('.listImg').css('left'))+790;

    console.log(left);

    $('.listImg').css('left', left);
});

以上代码的重复量还是比较大的，点击左右两个箭头，一个是加790，一个是减790，所以，可以封装一个函数

//点击左箭头

$('#prev').click(function(e){

    e.preventDefault();

    play(-790);
});
//点击右箭头

$('#next').click(function(e){

    e.preventDefault();

    play(790);
});
 
function play(offset){

    var left = parseInt($('.listImg').css('left'))+offset;

    console.log(left);

    $('.listImg').css('left', left);
}

效果：

第二步：点击左右箭头无限滚动

从上例中可以看到，当 left值等于 -790px时，显示第1张图片，left值为0时，图片列表加载到第1张图片的附属图（图六“每满1000，立减100”），再次点击，left变成790px 同时没有图片显示，所以，当left大于 -790px时，要把left值变为-4740px，让图片跳到第6张

当left值等于-4740px时，图片加载到第6张图，当left值小于-4740px 时，图片列表加载到第6张图片的附属图（图一“30天包退，180天包换”），之后就出现了空白，不显示广告图。所以，当left值小于-4740px时，要把left值变成-790px，让图片跳到第1张

//点击左箭头

$('#prev').click(function(e){

    e.preventDefault();

    play(-790);
});
//点击右箭头

$('#next').click(function(e){

    e.preventDefault();

    play(790);
});
 
function play(offset){

    var lists = $('.listImg');

    var left = parseInt(lists.css('left'))+offset;

    lists.css('left', left);

    //当left值等于-790时，显示的是第一张图，点右箭头，图片右移

    //再次点击时，图片加载到第一张图的附属图（图6），再点就露白了

    // 所以left大于-790时，让left变成-4740（跳到第6张图）

    if(left>-790){

        lists.css('left',-4740);

    //当left值等于-4740时，显示的是第六张图，点击左箭头，图片左移

    //再次点击时，图片加载到第六张图的附属图（图一），再点就露白了

    //所以left小于-4740时，让left变成-790（跳到第1张图）

    }else if(left<-4740){

        lists.css('left',-790);

    }
}

效果：

第三步：图片滚动时，激活对应的小圆点

获取所有的小圆点数组，点击箭头时，让数组加1或减1，对应的小圆点加上active 这个class

var lists = $('.listImg');
//当前播放的是哪张图片对应的小圆点

var index =1;
//获取所有的小圆点

var btns = $('.buttons li');
 
//“激活”对应的小圆点

function showButton(){

    //btns的下标从0开始,index从1到6，共6个小圆点，实际的图片下标是index-1

    btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');
}
 
//点击左箭头

$('#prev').click(function(e){

    e.preventDefault();

    //向左时，index减1

    index-=1;

    showButton();

    play(-790);
});
//点击右箭头

$('#next').click(function(e){

    e.preventDefault();

    //向右时，index加1

    index+=1;

    showButton();

    play(790);
});

效果：

上图中有一个问题，当点击箭头超过数组最大下标时，就没有小圆点变红了，而数组最大下标是5。所以，在点箭头的时候需要对下标做一个判断，index=6，就让index=1；index=1，就让index=6 （数组的index是0到5，小圆点的index是1到6，数组的index=小圆点index-1）

//点击左箭头

$('#prev').click(function(e){

    e.preventDefault();
 
    //index=1，就让index=6，否则加1

    index==1?index=6:(index-=1);

    showButton();

    play(-790);
});
//点击右箭头

$('#next').click(function(e){

    e.preventDefault();
 
    //index=6，就让index=1，否则减1

    index==6?index=1:(index+=1);

    showButton();

    play(790);
});

效果：

第四步：点击小圆点，切换对应的广告图

图片之所以能滚动，最主要是play方法中的 offset参数起了作用，右向滚动一张，则left值加上790px，因此，滚动三张，left值加上790px *3，反之亦然

同样的道理，当小圆点默认在第一个时，点击第3个小圆点时，要跳到第三张图片，left值就是（3-1）*790，即 (targetIndex - index)*790 （targetIndex：要点击哪个小圆点，index：当前的小圆点）

//点击小圆点，切换图片

btns.click(function(){

    //获取被点击的小圆点的自定义属性index的值

    var targetIndex = parseInt($(this).children().attr('index'));

    console.log(targetIndex);

    //定义图片的偏移量

    var offset = -790 * (targetIndex - index);
 
    play(offset);

    //更新当前的index

    index = targetIndex;

    showButton();
});

效果：

上图中，当重复点一个小圆点的时候，程序还在不断的获取自定义的index值，也就是说还在不断的去执行play方法，这个是完全没有必要的。

这里可以做一个判断

//点击小圆点，切换图片

btns.click(function(){

    //如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）

    // 而被选中的小圆点都会加上一个active

    if($(this).hasClass('active')){

        return; //直接退出点击事件的方法

    }

    //获取被点击的小圆点的自定义属性index的值

    var targetIndex = parseInt($(this).children().attr('index'));

    console.log(targetIndex);

    //定义图片的偏移量

    var offset = -790 * (targetIndex - index);
 
    play(offset);

    //更新当前的index

    index = targetIndex;

    showButton();
});

效果：（反复点的时候，不再获取index为4的值，即不再重复执行其它方法）

第五步：添加动画，自动播放

页面一加载完成，图片就自动向左滑动，而向左滑动这个是可以通过点击右箭头实现的，所以我们需要定义一个启动方法，在方法里面为右箭头匹配点击事件，并触发play方法播放动画

//间隔时间，多少毫秒播一次

var interval = 3000;
 
var timer;
 
//启动动画

function start() {

    timer = setInterval(function () {

        $('#next').trigger('click');

        play();

    }, interval);
}
 
start();

效果：

第六步：停止动画

当鼠标进入广告图或者是点击左右箭头、小圆点的时候，动画就应该终止

//停止动画

function stop() {

    clearTimeout(timer);
}
 
$('.container').hover(stop, start); //鼠标移入停止，移出启动
 
//点击左箭头

$('#prev').click(function(e){

    e.preventDefault();

    //终止动画

    if(lists.is(':animated')){

        return;

    }
 
    //index=1，就让index=6，否则加1

    index==1?index=6:(index-=1);

    showButton();

    play(-790);
});
 
//点击右箭头

$('#next').click(function(e){

    e.preventDefault();

    //终止动画

    if(lists.is(':animated')){

        return;

    }
 
    //index=6，就让index=1，否则减1

    index==6?index=1:(index+=1);

    showButton();

    play(790);
});
 
//点击小圆点，切换图片

btns.click(function(){

    //如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）

    // 而被选中的小圆点都会加上一个active

    if($(this).hasClass('active') || lists.is(':animated')){

        return; //直接退出点击事件的方法

    }

    //获取被点击的小圆点的自定义属性index的值

    var targetIndex = parseInt($(this).children().attr('index'));

    //定义图片的偏移量

    var offset = -790 * (targetIndex - index);
 
    play(offset);

    //更新当前的index

    index = targetIndex;

    showButton();
});

效果：

当然，图片滑动的时候，最好是能用上animate事件，有一个动画的效果，而不是直接的切换某一张图片到哪个位置上。

代码汇总：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0; padding:0;}

        ul{list-style:none;}

        a{text-decoration:none;}

        .clearfix{zoom:1;}

        .clearfix:after{display:block; content:''; clear: both;}

        .container{position:relative; width:790px; height:340px; margin:100px auto; overflow:hidden;}

        .listImg{position:absolute; width:6320px; height:340px;}

        .listImg li{float:left;}

        .listImg li a img{width:100%;}

        /*箭头样式*/

        .arrow{ width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,.3); color:#fff; font-size: 2em;

                z-index:100; cursor:pointer; position:absolute; top:40%; display:none;

        }

        .arrow:hover{background:rgba(0,0,0,0.6);}

        #prev{left:20px;}

        #next{right:20px;}

        .container:hover .arrow{display:block;} /*鼠标进入轮播图才显示两个按钮*/

        /*小按钮样式*/

        .buttons{position:absolute; bottom:20px; left:45%; z-index:100;}

        .buttons li{float:left; margin-right:10px;}

        .buttons li span{display:block; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer;}

        .buttons li.active span{background:#f00;}

    </style>

</head>

<body>

<div class="container">

    <div class="list">

        <!--轮播广告图-->

        <ul class="listImg clearfix" style="left:-790px;">

            <li><a href="#"><img src="img/6.jpg" alt="图片六"></a></li>

            <li><a href="#"><img src="img/1.jpg" alt="图片一"></a></li>

            <li><a href="#"><img src="img/2.jpg" alt="图片二"></a></li>

            <li><a href="#"><img src="img/3.jpg" alt="图片三"></a></li>

            <li><a href="#"><img src="img/4.jpg" alt="图片四"></a></li>

            <li><a href="#"><img src="img/5.jpg" alt="图片五"></a></li>

            <li><a href="#"><img src="img/6.jpg" alt="图片六"></a></li>

            <li><a href="#"><img src="img/1.jpg" alt="图片一"></a></li>

        </ul>

        <!--中间的6个小按钮-->

        <ul class="buttons clearfix">

            <li class="active"><span index="1"></span></li>

            <li><span index="2"></span></li>

            <li><span index="3"></span></li>

            <li><span index="4"></span></li>

            <li><span index="5"></span></li>

            <li><span index="6"></span></li>

        </ul>

        <!--左右点击按钮-->

        <a href="#" class="arrow" id="prev">&lt;</a>

        <a href="#" class="arrow" id="next">&gt;</a>

    </div>

</div>
 
<script src="dist/jquery-1.8.3.min.js"></script>

<script>

    var lists = $('.listImg');
 
    //获取所有的小圆点

    var btns = $('.buttons li');
 
    //当前播放的是哪张图片对应的小圆点

    var index =1;
 
    //广告图片的张数

    var len = 6;
 
    //间隔时间，多少毫秒播一次

    var interval = 3000;
 
    var timer;
 
    //滚动图片

    function play(offset){
 
        var left = parseInt(lists.css('left'))+offset;
 
        if (offset>0) {

            offset = '+=' + offset;

        }

        else {

            offset = '-=' + Math.abs(offset);

        }
 
        lists.animate({'left':offset},500,function(){

            if(left>-790){

                lists.css('left', -790*len);

            }else if(left< -790*len ){

                lists.css('left', -790);

            }

        })
 
    }

    //启动动画

    function start() {

        timer = setInterval(function () {

            $('#next').trigger('click');

            play();

        }, interval);

    }
 
    //停止动画

    function stop() {

        clearTimeout(timer);

    }
 
    //点击左箭头

    $('#prev').click(function(e){

        e.preventDefault();
 
        if(lists.is(':animated')){

            return;

        }
 
        //index=1，就让index=6，否则加1

        index==1?index=len:(index-=1);

        showButton();

        play(-790);

    });
 
    //点击右箭头

    $('#next').click(function(e){

        e.preventDefault();
 
        if(lists.is(':animated')){

            return;

        }
 
        //index=6，就让index=1，否则减1

        index==len?index=1:(index+=1);

        showButton();

        play(790);

    });
 
    //“激活”对应的小圆点

    function showButton(){

        //btns的下标从0开始,index从1到6，共6个小圆点，实际的图片下标是index-1

        btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');

    }
 
    //点击小圆点，切换图片

    btns.click(function(){

        //如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）

        // 而被选中的小圆点都会加上一个active

        if($(this).hasClass('active') || lists.is(':animated')){

            return; //直接退出点击事件的方法

        }

        //获取被点击的小圆点的自定义属性index的值

        var targetIndex = parseInt($(this).children().attr('index'));

        //定义图片的偏移量

        var offset = -790 * (targetIndex - index);
 
        play(offset);

        //更新当前的index

        index = targetIndex;

        showButton();

    });
 
    $('.container').hover(stop, start); //鼠标移入停止，移出启动
 
    start();
 
</script>

</body>

</html>

以上仅仅是闲来无事整理的一个小demo，实际使用中，也可以使用类似 Swiper、Hammer等优秀的插件

本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1884704