jQuery 仿写京东轮播广告图

2024-12-08 技术教程

基本样式：

HTML代码：

<divclass="container"><divclass="list"><ulclass="listImgclearfix"><li><ahref="#"><imgsrc="img/6.jpg"alt="图片六"></a></li><li><ahref="#"><imgsrc="img/1.jpg"alt="图片一"></a></li><li><ahref="#"><imgsrc="img/2.jpg"alt="图片二"></a></li><li><ahref="#"><imgsrc="img/3.jpg"alt="图片三"></a></li><li><ahref="#"><imgsrc="img/4.jpg"alt="图片四"></a></li><li><ahref="#"><imgsrc="img/5.jpg"alt="图片五"></a></li><li><ahref="#"><imgsrc="img/6.jpg"alt="图片六"></a></li><li><ahref="#"><imgsrc="img/1.jpg"alt="图片一"></a></li></ul><ulclass="buttonsclearfix"><liclass="active"><spanindex="1"></span></li><li><spanindex="2"></span></li><li><spanindex="3"></span></li><li><spanindex="4"></span></li><li><spanindex="5"></span></li><li><spanindex="6"></span></li></ul><ahref="#"class="arrow"id="prev"><</a><ahref="#"class="arrow"id="next">></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:100pxauto;overflow:hidden;}.listImg{position:absolute;width:6320px;height:340px;}.listImgli{float:left;}.listImgliaimg{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;}.buttonsli{float:left;margin-right:10px;}.buttonslispan{display:block;width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer;}.buttonsli.activespan{background:#f00;}

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

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

//点击左箭头$('#prev').click(function(e){e.preventDefault();varleft=parseInt($('.listImg').css('left'))-790;console.log(left);$('.listImg').css('left',left);});//点击右箭头$('#next').click(function(e){e.preventDefault();varleft=parseInt($('.listImg').css('left'))+790;console.log(left);$('.listImg').css('left',left);});

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

效果：

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

从上例中可以看到，当 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);});functionplay(offset){varlists=$('.listImg');varleft=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张图）}elseif(left<-4740){lists.css('left',-790);}}

效果：

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

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

varlists=$('.listImg');//当前播放的是哪张图片对应的小圆点varindex=1;//获取所有的小圆点varbtns=$('.buttonsli');//“激活”对应的小圆点functionshowButton(){//btns的下标从0开始,index从1到6，共6个小圆点，实际的图片下标是index-1btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');}//点击左箭头$('#prev').click(function(e){e.preventDefault();//向左时，index减1index-=1;showButton();play(-790);});//点击右箭头$('#next').click(function(e){e.preventDefault();//向右时，index加1index+=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，否则加1index==1?index=6:(index-=1);showButton();play(-790);});//点击右箭头$('#next').click(function(e){e.preventDefault();//index=6，就让index=1，否则减1index==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的值vartargetIndex=parseInt($(this).children().attr('index'));console.log(targetIndex);//定义图片的偏移量varoffset=-790*(targetIndex-index);play(offset);//更新当前的indexindex=targetIndex;showButton();});

效果：

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

这里可以做一个判断

//点击小圆点，切换图片btns.click(function(){//如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）//而被选中的小圆点都会加上一个activeif($(this).hasClass('active')){return;//直接退出点击事件的方法}//获取被点击的小圆点的自定义属性index的值vartargetIndex=parseInt($(this).children().attr('index'));console.log(targetIndex);//定义图片的偏移量varoffset=-790*(targetIndex-index);play(offset);//更新当前的indexindex=targetIndex;showButton();});

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

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

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

//间隔时间，多少毫秒播一次varinterval=3000;vartimer;//启动动画functionstart(){timer=setInterval(function(){$('#next').trigger('click');play();},interval);}start();

效果：

第六步：停止动画

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

//停止动画functionstop(){clearTimeout(timer);}$('.container').hover(stop,start);//鼠标移入停止，移出启动//点击左箭头$('#prev').click(function(e){e.preventDefault();//终止动画if(lists.is(':animated')){return;}//index=1，就让index=6，否则加1index==1?index=6:(index-=1);showButton();play(-790);});//点击右箭头$('#next').click(function(e){e.preventDefault();//终止动画if(lists.is(':animated')){return;}//index=6，就让index=1，否则减1index==6?index=1:(index+=1);showButton();play(790);});//点击小圆点，切换图片btns.click(function(){//如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）//而被选中的小圆点都会加上一个activeif($(this).hasClass('active')||lists.is(':animated')){return;//直接退出点击事件的方法}//获取被点击的小圆点的自定义属性index的值vartargetIndex=parseInt($(this).children().attr('index'));//定义图片的偏移量varoffset=-790*(targetIndex-index);play(offset);//更新当前的indexindex=targetIndex;showButton();});

效果：

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

代码汇总：

<!DOCTYPEhtml><html><headlang="en"><metacharset="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:100pxauto;overflow:hidden;}.listImg{position:absolute;width:6320px;height:340px;}.listImgli{float:left;}.listImgliaimg{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;}.buttonsli{float:left;margin-right:10px;}.buttonslispan{display:block;width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer;}.buttonsli.activespan{background:#f00;}</style></head><body><divclass="container"><divclass="list"><ulclass="listImgclearfix"><li><ahref="#"><imgsrc="img/6.jpg"alt="图片六"></a></li><li><ahref="#"><imgsrc="img/1.jpg"alt="图片一"></a></li><li><ahref="#"><imgsrc="img/2.jpg"alt="图片二"></a></li><li><ahref="#"><imgsrc="img/3.jpg"alt="图片三"></a></li><li><ahref="#"><imgsrc="img/4.jpg"alt="图片四"></a></li><li><ahref="#"><imgsrc="img/5.jpg"alt="图片五"></a></li><li><ahref="#"><imgsrc="img/6.jpg"alt="图片六"></a></li><li><ahref="#"><imgsrc="img/1.jpg"alt="图片一"></a></li></ul><ulclass="buttonsclearfix"><liclass="active"><spanindex="1"></span></li><li><spanindex="2"></span></li><li><spanindex="3"></span></li><li><spanindex="4"></span></li><li><spanindex="5"></span></li><li><spanindex="6"></span></li></ul><ahref="#"class="arrow"id="prev"><</a><ahref="#"class="arrow"id="next">></a></div></div><scriptsrc="dist/jquery-1.8.3.min.js"></script><script>varlists=$('.listImg');//获取所有的小圆点varbtns=$('.buttonsli');//当前播放的是哪张图片对应的小圆点varindex=1;//广告图片的张数varlen=6;//间隔时间，多少毫秒播一次varinterval=3000;vartimer;//滚动图片functionplay(offset){varleft=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);}elseif(left<-790*len){lists.css('left',-790);}})}//启动动画functionstart(){timer=setInterval(function(){$('#next').trigger('click');play();},interval);}//停止动画functionstop(){clearTimeout(timer);}//点击左箭头$('#prev').click(function(e){e.preventDefault();if(lists.is(':animated')){return;}//index=1，就让index=6，否则加1index==1?index=len:(index-=1);showButton();play(-790);});//点击右箭头$('#next').click(function(e){e.preventDefault();if(lists.is(':animated')){return;}//index=6，就让index=1，否则减1index==len?index=1:(index+=1);showButton();play(790);});//“激活”对应的小圆点functionshowButton(){//btns的下标从0开始,index从1到6，共6个小圆点，实际的图片下标是index-1btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');}//点击小圆点，切换图片btns.click(function(){//如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）//而被选中的小圆点都会加上一个activeif($(this).hasClass('active')||lists.is(':animated')){return;//直接退出点击事件的方法}//获取被点击的小圆点的自定义属性index的值vartargetIndex=parseInt($(this).children().attr('index'));//定义图片的偏移量varoffset=-790*(targetIndex-index);play(offset);//更新当前的indexindex=targetIndex;showButton();});$('.container').hover(stop,start);//鼠标移入停止，移出启动start();</script></body></html>

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