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

jQuery 仿写京东轮播广告图

简介:
+关注继续查看

基本样式:


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:0padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
.clearfix{zoom:1;}
.clearfix:after{display:blockcontent:''clearboth;}
.container{position:relativewidth:790pxheight:340pxmargin:100px autooverflow:hidden;}
.listImg{position:absolutewidth:6320pxheight:340px;}
.listImg li{float:left;}
.listImg li a img{width:100%;}
/*箭头样式*/
.arrow{ width:30pxheight:60pxline-height:60pxtext-align:centerbackground:rgba(0,0,0,.3); color:#ffffont-size2em;
        z-index:100cursor:pointerposition:absolutetop: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:absolutebottom:20pxleft:45%z-index:100;}
.buttons li{float:leftmargin-right:10px;}
.buttons li span{display:blockwidth:10pxheight:10px; border-radius:50%background:#fffcursor: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,实际使用中,也可以使用类似 SwiperHammer等优秀的插件


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

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

相关文章
jQuery仿小米手风琴案例
jQuery仿小米手风琴案例
0 0
2020更新,Vue仿探探拖拽卡片的效果
类似Tinder和探探的卡片效果的组件,社区中已经非常多了。我这一版除了可以实现和他们一样的效果外。还增加了飞卡的效果
0 0
仿淘宝轮播图 ,需要运动框架
DOCTYPE HTML> 无标题文档 #div1 {width: 520px; height: 280px; border: 1px solid #000; margin: 100px auto 0; position: relative; overflow: hidden...
586 0
Jquery商品飞入购物车动画效果实例展示
刚接手一个小玩意,值得收藏分享给大家! 《产品图片飞入购物车的jQuery动画》 无标题文档 *{ margin:0; padding:0;} .good-area{ width:200px; position:absolute; left:100px; top:50px;} .
475 0
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。
647 0
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
《优酷响应式布局技术全解析》
立即下载
微信广告引擎与播放节奏算法实践
立即下载
3D动画的菜谱式灯光与云渲染
立即下载