jQuery 仿写京东轮播广告图
更新:HHH   时间:2023-1-7


基本样式:


HTML代码:

<div class="container">
    <div class="list">
        <!--轮播广告图-->
        <ul class="listImg clearfix" >
            <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" >
            <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等优秀的插件


返回web开发教程...