开发者社区> 技术小牛人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery 仿写京东轮播广告图

2017-11-20 1331

简介：
+关注继续查看

基本样式：


HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*{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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//点击左箭头
$('#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，所以，可以封装一个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//点击左箭头
$('#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);
}



效果：

wKioL1hYv72TBPjTABIqn3KmdEU945.gif


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


从上例中可以看到，当 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张

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//点击左箭头
$('#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);
    }
}


效果：

wKioL1hYxFvBwqN8ABM7IkcRjq8395.gif



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


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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);
});


效果：

wKiom1hYzwKQ-LP7ABleLP5m7Pc998.gif


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//点击左箭头
$('#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);
});


效果：

wKiom1hY0zaSDUVkABju1qnD1b8071.gif



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


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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
//点击小圆点，切换图片
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();
});


效果：

wKioL1hY2Ybyp8jsAA4wXHejphY708.gif


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


这里可以做一个判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//点击小圆点，切换图片
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的值，即不再重复执行其它方法）

wKiom1hY253wiV1hAAOQPiX1fsc487.gif



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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//间隔时间，多少毫秒播一次
var interval = 3000;
 
var timer;
 
//启动动画
function start() {
    timer = setInterval(function () {
        $('#next').trigger('click');
        play();
    }, interval);
}
 
start();


效果：

wKiom1haFAPzMx2rAAo__cIZHQc626.gif



第六步：停止动画


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//停止动画
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();
});


效果：

wKioL1haGVDRhKvIAAq_oSiT4d4109.gif



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


代码汇总：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!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

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发 JavaScript 索引 容器
jQuery轮播
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4170 Mifare Classic Tool(MCT)汉化版 16295 Linux中查看socket状态 2932 DHCP服务详解及配置 3120 Linux学习 Unit 7 1652
相关文章
明金同学
使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
0 0
余二五
Jquery的三轮播效果
771 0
cometwo123
轻量级jQuery带底栏轮播(焦点图)插件slideBox
1489 0
落雨_
jquery制作一个简单的轮播
效果图： 演示地址：http://ae6623.cn/demo/slider/index.html 思路： 利用css的定位属性 left 进行调整图片的显示，每次点击上一页下一页按钮的时候，-图片宽度 * index(当前li索引)即可。
755 0
业余草
jQuery Mobile图片轮转轮播
<p>最近一直很忙，刚抽出一点时间，来看了一下camera，非常好用，这里分享一下，与大家共勉！</p> <p></p> <pre code_snippet_id="484636" snippet_file_name="blog_20141015_1_8411998" name="code" class="html">&lt;!DOCTYPE html&gt; &lt;html&gt;
2937 0
不苒
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
解圃
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
0 0
torchstars
DateTimePicket jQuery 日期插件，开始时间和结束时间示例
DateTimePicket jQuery 日期插件，开始时间和结束时间示例
0 0
go-Jack
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
0 0
红目香薰
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
0 0
+关注
技术小牛人
文章
问答
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4170 Mifare Classic Tool(MCT)汉化版 16295 Linux中查看socket状态 2932 DHCP服务详解及配置 3120 Linux学习 Unit 7 1652
文章排行榜
最热
最新
1 承上启下：基于全域漏斗分析的主搜深度统一粗排 91460
2 复杂链表的复制 90594
3 【Transform3D】转换详解（看完就会） 88136
4 【flexbox弹性布局学习指南】CSS热门布局方案 68821
5 如何构建标签画像工程体系及实现方案 63096
6 DCM：中间件家族迎来新成员 61163
7 系统的混乱并业务本身之复杂，我们并不擅长处理『简单』 48267
8 超越10倍开发者 48135
9 ⚡Three.js-在场景中导入3D动画模型 46102
10 Request&Response 39090
11 《JavaScript高级程序设计》__ 作用域&内存 37892
12 影响成长的关键思考 34899
13 K8S学习-当我们部署应用的时候都发生了什么？（第一篇） 30678
14 【从零开始学习深度学习】12. 什么是模型的训练误差？基于三阶多项式的欠拟合与过拟合训练过程演示 27890
15 阿里云物联网平台设备分发实战 33496
16 ChatGPT 常见错误原因及解决方案：报错、回答不完整等 21606
17 Python3，5行代码，让你拥有无限量壁纸美图，终于告别手动下载了。 16278
18 Python3，区区9行代码批量提取PDF文件的指定内容，我被震惊了.... 5176
19 Python3，9行代码，对比两个Excel数据差异，并把差异结果重新保存。 8395
20 深聊性能测试，从入门到放弃之： Windows系统性能监控(一) 性能监视器介绍及使用。 9371
1 【数据设计与实现】第5章：同步与互斥 53
2 Python库函数pandas读取excel数据 54
3 谈谈《流浪地球2》中如何正确的“重启互联网” 1711
4 2023阿里云学生服务器免费申请流程 128
5 2023 年8个ChatGPT 的替代品 88
6 java: 错误: 无效的源发行版：17 110
7 YAML与Spring Boot 208
8 AI给你送年画啦！每一张都是独一无二 102
9 关于2023年1月1日起扣税规则说明 73
10 第3期乘风伯乐奖--寻找百位乘风者伯乐，邀请新博主入驻即可获奖 61
11 使用ChatGPT帮我们写一篇论文，最后查重的重复率会是多少？ 74
12 中原银行对金融行业实时数仓的现状与发展趋势思考 269
13 系列征文3｜算法领域主题征文开始啦！ 52
14 玖章算术CEO叶正盛：程序员必须掌握的数据库原理 133
15 大火的4D Radar数据集及基线模型汇总 53
16 海思3559万能平台搭建：RTSP实时播放的支持 55
17 万字长文 | 多目标跟踪最新综述（基于Transformer/图模型/检测和关联/孪生网络）（下） 78
18 Windows和Ubuntu双系统安装（非虚拟机） 175
19 关系代数和SQL语法 55
20 2023跨年代码（烟花+自定义文字+背景音乐+雪花+倒计时） 803
相关课程
更多
jQuery UI 速成
584
53
去学习
推荐文章
2022藏经阁年度电子书榜单出炉！ 参与应用引擎 SAE评测，赢取CHERRY机械键盘等好礼 “第益课”大学生技术公益 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
3D动画的菜谱式灯光与云渲染
立即下载
《优酷响应式布局技术全解析》
立即下载
低代码开发师（初级）实战教程
立即下载