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 : 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,实际使用中,也可以使用类似 SwiperHammer等优秀的插件


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

相关文章
|
5月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
54 1
jQuery+CSS3自动轮播焦点图特效源码
|
JavaScript
jQuery 淘宝精品服饰广告案例
jQuery 淘宝精品服饰广告案例
61 0
|
JavaScript 前端开发
jquery通过setInterval实现按钮的轮播点击效果
jquery通过setInterval实现按钮的轮播点击效果
67 0
jquery通过setInterval实现按钮的轮播点击效果
jQuery实现广告显示和隐藏
jQuery实现广告显示和隐藏
|
JavaScript
jQuery实现京东轮播图
jQuery实现京东轮播图
151 0
jQuery实现京东轮播图
|
JavaScript 索引
使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片
使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片
374 0
使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片
|
JavaScript
jQuery自动轮播图片焦点图
在线演示 本地下载
1208 0
|
JavaScript
JQuery实现父级选择器(广告实现)
效果图如下: HTML代码如下: Document .left,.right{ position: fixed; top: 250px; } .
929 0