本次要實(shí)現(xiàn)的是天貓首頁(yè)每個(gè)樓層左側(cè)的圖片輪播效果。見(jiàn)圖：
功能點(diǎn)有：點(diǎn)擊右箭頭向右滑動(dòng)；點(diǎn)擊左箭頭向左滑動(dòng)；什么都不點(diǎn)自動(dòng)滑動(dòng)。
1.實(shí)現(xiàn)樣式。
簡(jiǎn)單分析一下大概的html結(jié)構(gòu)。一個(gè)大的div里面包含兩個(gè)箭頭以及輪播的容器。圖片是由三個(gè)p標(biāo)簽組成，每個(gè)p標(biāo)簽中包含3個(gè)圖片。
css見(jiàn)github 1 <div class="floor-show-middle"> 2 <a class="floor-show-middle-arrow arrow-left" title="上一個(gè)幻燈片"></a> 3 <a class="floor-show-middle-arrow arrow-right" title="下一個(gè)幻燈片"></a> 4 <div class="brand-slide-content"> 5 <div class="brand-slide-bg" is-animating="false"> 6 <p class="pt-page page-current"> 7 <a href=""><img src="images/1-1.jpg"></a> 8 <a href=""><img src="images/1-2.jpg"></a> 9 <a href=""><img src="images/1-3.jpg"></a> 10 </p> 11 <p class="pt-page"> 12 <a href=""><img src="images/2-1.jpg"></a> 13 <a href=""><img src="images/2-2.jpg"></a> 14 <a href=""><img src="images/2-3.jpg"></a> 15 </p> 16 <p class="pt-page"> 17 <a href=""><img src="images/3-1.jpg"></a> 18 <a href=""><img src="images/3-2.jpg"></a> 19 <a href=""><img src="images/3-3.jpg"></a> 20 </p> 21 </div> 22 </div> 23 </div>

得到的效果是：

?

2. 圖片輪播動(dòng)畫效果的實(shí)現(xiàn)。

　　為了方便描述，給三個(gè)需要展示的p編個(gè)號(hào)：①②③。

　　輪播的難點(diǎn)1：圖片沒(méi)法成圓圈式排列，怎么才能讓處于邊界的p①在向右滑動(dòng)的時(shí)候左邊有個(gè)③在向右滑動(dòng)，and 怎么讓處于邊界的p③在向左滑動(dòng)的時(shí)候右邊有個(gè)①在向右滑動(dòng)。

　　輪播的難點(diǎn)2：由于無(wú)法控制用戶點(diǎn)擊箭頭的速度，如果前一個(gè)圖片移動(dòng)沒(méi)完成就進(jìn)行下一個(gè)圖片移動(dòng)，會(huì)造成混亂。解決辦法很簡(jiǎn)單，為每個(gè)div增加一個(gè)屬性is_animating，當(dāng)動(dòng)畫開始設(shè)置為true，監(jiān)聽動(dòng)畫結(jié)束事件，結(jié)束后設(shè)置為false；每次在執(zhí)行動(dòng)畫之前都需要判斷這個(gè)變量。

　　如果三個(gè)p標(biāo)簽按照從左至右依次不疊加排列①②③，需要做到滑動(dòng)效果的話②是很好實(shí)現(xiàn)，而①在從左至右滑動(dòng)時(shí)因?yàn)樽筮厸](méi)有元素了，所以無(wú)法循環(huán)滑動(dòng)，同理③也是。好了，想辦法。

方法一：p標(biāo)簽從左至右排列，頭尾添加副本法。為了保證每張圖片都有順滑的從左至右滑動(dòng)的動(dòng)畫效果，可以在在頭部前面加上p③，在尾部加上p①；最后p標(biāo)簽的排列效果就是③①②③①；舉個(gè)例子：

　　1.將div.brand-slide-bg中的樣式設(shè)置為position:absolute;這樣就可以使用left，right屬性來(lái)讓該div移動(dòng)；

　　2.當(dāng)?shù)谝粋€(gè)①在可視區(qū)域內(nèi)時(shí)，點(diǎn)擊左箭頭 -> div向左移動(dòng)1個(gè)單位 -> ?移動(dòng)完成后，將div的left的值改為-300px，讓第二個(gè)③迅速處于可視區(qū)域

　　實(shí)現(xiàn)方法一：使用jquery中，animate方法移動(dòng)（未添加動(dòng)畫原子性判斷，剛開始寫復(fù)用性還不太好，可以參考下思想）：

右箭頭處理函數(shù)animate() 1 function autoMove(){ 2 var p_length=100;//p元素的寬度 3 var slide_div=$(".brand-slide-bg");//class為brand-slide-bg的div 4 var pic_index=slide_div.attr("index");//當(dāng)前圖片的索引 5 var p_quantities=slide_div.children("p").length; 6 slide_div.clearQueue(); 7 if (pic_index==1) { 8 pic_index=p_quantities; 9 var last_p=slide_div.children("p").last(); 10 slide_div.css("left","-100px"); 11 slide_div.children("p").first().before(last_p.clone()); 12 13 slide_div.animate({ 14 left:0 15 },700, 16 function(){ 17 //回調(diào)函數(shù)，刪除添加的p 18 slide_div.children("p").first().remove();//刪除為了滑動(dòng)而添加的元素 19 var left=getLeft(p_length,pic_index); 20 slide_div.css("left",left); 21 }); 22 }else{ 23 pic_index--; 24 var left=getLeft(p_length,pic_index);//相對(duì)于父容器向左移動(dòng)的值 25 slide_div.animate({ 26 left:left 27 },800); 28 } 29 slide_div.attr("index",pic_index); 30 autoTask=setTimeout("autoMove()",2000); 31 } 自動(dòng)輪播處理函數(shù)animate()

　　實(shí)現(xiàn)方法二：使用css3的屬性transition來(lái)移動(dòng)：

　　CSS3特性：transition＋transform

　　以下是一個(gè)點(diǎn)擊右邊箭頭的幻燈片向右翻動(dòng)的代碼，通過(guò)監(jiān)聽webkitTransitionEnd方法監(jiān)聽transition的結(jié)束時(shí)間，結(jié)束的時(shí)候快速將幻燈片的位置換到－100px的初始位置。

1 $(".arrow-right").click(function(){ 2 var slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg");//滑動(dòng)幻燈片的父div 3 var index=slide_div.attr("index");//當(dāng)前圖片的索引，默認(rèn)為1 4 index++; 5 var position=index*(-100)+"px"; 6 if(index==2){ 7 slide_div.css("-webkit-transform-origin","-100px 0 0"); 8 } 9 slide_div.css("-webkit-transition-duration","0.5s"); 10 slide_div.css("-webkit-transform","translate3d("+position+",0,0)"); 11 slide_div.attr("index",index); 12 }); 13 /*小的滑動(dòng)的幻燈片end*/ 14 15 $(".brand-slide-bg").bind('webkitTransitionEnd', function(){ 16 index=$(this).attr("index");//監(jiān)聽動(dòng)畫完成的動(dòng)作 17 if(index==4){ 18 index=1; 19 $(this).css("-webkit-transition-duration","0s"); 20 $(this).css("-webkit-transform","translate3d(-100px,0,0)"); 21 $(this).attr("index",index); 22 } 23 }); 24 transition右箭頭處理函數(shù)

?

方法二：p標(biāo)簽疊加排列，為每個(gè)p添加每個(gè)滑動(dòng)方向的動(dòng)畫事件。

這種方式不需要新增p的副本，只有需要展示的p顯示，其余都隱藏。

這次用css3的新特性，@ keyframes來(lái)實(shí)現(xiàn)。通過(guò) @keyframes 規(guī)則，能夠創(chuàng)建動(dòng)畫。配合css屬性animation來(lái)使用。

css樣式定義：

由于要支持不同瀏覽器，@-moz-keyframes在火狐中被解釋，@-webkit-keyframes在chrome等webkit為核心的瀏覽器中被解釋。

keyframe中需要定義from和to兩個(gè)key的值，表示動(dòng)畫開始時(shí)元素的樣式和動(dòng)畫結(jié)束時(shí)元素的樣式。from，to也可以用百分比來(lái)代替，更精確

animate屬性定義使用哪個(gè)動(dòng)畫、動(dòng)畫時(shí)常、動(dòng)畫執(zhí)行次數(shù)。

設(shè)計(jì)上，為每個(gè)p元素在不同場(chǎng)景下劃分不同css類，定義不同的動(dòng)畫。

.moveToLeft表示從當(dāng)前位置向左移動(dòng)。.moveFromLeft表示從左移動(dòng)到指定位置。依次類推。

在定義一個(gè)類.page_current將該元素不隱藏展示

舉個(gè)例子：p有①②③三個(gè)，默認(rèn)都是隱藏狀態(tài)。當(dāng)前可視的只有②，點(diǎn)擊左箭頭。給p賦值的場(chǎng)景如下：②新增.moveToLeft，③新增moveFromRight，動(dòng)畫完成后，②去掉.moveToLeft;③去掉moveFroRight，③加上.page_current類

1 .moveFromRight{ 2 animation:moveFromRight 0.5s ease 1; 3 -moz-animation:moveFromRight 0.5s ease 1; /* Firefox */ 4 -webkit-animation:moveFromRight 0.5s ease 1; /* Safari and Chrome */ 5 -o-animation:moveFromRight 0.5s ease 1; /* Opera */ 6 } 7 .moveToLeft{ 8 animation:moveToLeft 0.5s ease 1; 9 -moz-animation:moveToLeft 0.5s ease 1; /* Firefox */ 10 -webkit-animation:moveToLeft 0.0.5s ease 1; /* Safari and Chrome */ 11 -o-animation:moveToLeft 0.5s ease 1; /* Opera */ 12 } 13 .moveFromLeft{ 14 animation:moveFromLeft 0.5s ease 1; 15 -moz-animation:moveFromLeft 0.5s ease 1; /* Firefox */ 16 -webkit-animation:moveFromLeft 0.5s ease 1; /* Safari and Chrome */ 17 -o-animation:moveFromLeft 0.5s ease 1; /* Opera */ 18 } 19 .moveToRight{ 20 animation:moveToRight 0.5s ease 1; 21 -moz-animation:moveToRight 0.5s ease 1; /* Firefox */ 22 -webkit-animation:moveToRight 0.5s ease 1; /* Safari and Chrome */ 23 -o-animation:moveToRight 0.5s ease 1; /* Opera */ 24 } 25 26 @-webkit-keyframes moveToLeft { 27 to { -webkit-transform: translateX(-100%); } 28 } 29 @-moz-keyframes moveToLeft { 30 to { -moz-transform: translateX(-100%); } 31 } 32 @keyframes moveToLeft { 33 to { transform: translateX(-100%); } 34 } 35 @-webkit-keyframes moveFromLeft { 36 from { -webkit-transform: translateX(-100%); } 37 } 38 @-moz-keyframes moveFromLeft { 39 from { -moz-transform: translateX(-100%); } 40 } 41 @keyframes moveFromLeft { 42 from { transform: translateX(-100%); } 43 } 44 45 @-webkit-keyframes moveToRight { 46 to { -webkit-transform: translateX(100%); } 47 } 48 @-moz-keyframes moveToRight { 49 to { -moz-transform: translateX(100%); } 50 } 51 @keyframes moveToRight { 52 to { transform: translateX(100%); } 53 } 54 55 @-webkit-keyframes moveFromRight { 56 from { -webkit-transform: translateX(100%); } 57 } 58 @-moz-keyframes moveFromRight { 59 from { -moz-transform: translateX(100%); } 60 } 61 @keyframes moveFromRight { 62 from { transform: translateX(100%); } 63 } keyframes樣式定義 1 $(document).ready(function(){ 2 $(".brand-slide-bg").children("p").bind('webkitAnimationStart', function() { 3 $(this).parent(".brand-slide-bg").attr("is-animating",true); 4 }); 5 $(".brand-slide-bg").children("p").bind('webkitAnimationEnd', function() { 6 if($(this).hasClass("moveToLeft")){ 7 $(this).removeClass("page-current"); 8 $(this).removeClass("moveToLeft"); 9 } 10 if($(this).hasClass("moveToRight")){ 11 $(this).removeClass("page-current"); 12 $(this).removeClass("moveToRight"); 13 } 14 if($(this).hasClass("moveFromRight")){ 15 $(this).addClass("page-current"); 16 $(this).removeClass("moveFromRight"); 17 } 18 if($(this).hasClass("moveFromLeft")){ 19 $(this).addClass("page-current"); 20 $(this).removeClass("moveFromLeft"); 21 } 22 $(this).parent(".brand-slide-bg").attr("is-animating",false); 23 }); 24 $(".arrow-right").click(function() { 25 slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg"); 26 moveLittlePage(slide_div,"right","moveFromLeft","moveToRight"); 27 }); 28 $(".arrow-left").click(function() { 29 slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg"); 30 moveLittlePage(slide_div,"left","moveFromRight","moveToLeft"); 31 }); 32 page_auto_move(); 33 }); 34 35 function page_auto_move(){ 36 $(".brand-slide-bg").each(function(){ 37 moveLittlePage($(this),"right","moveFromLeft","moveToRight"); 38 }); 39 setTimeout("page_auto_move()",2000); 40 } 41 function moveLittlePage(slide_div,way,from_css,to_css){ 42 if(slide_div.attr("is-animating")=="true"){return;}//動(dòng)畫未結(jié)束不能開始 43 var current_css="page-current"; 44 var current_p=slide_div.children(".page-current"); 45 current_p.addClass(to_css); 46 if(way=="left"){ 47 if (current_p.next().length<=0) { 48 slide_div.children().first().addClass(from_css); 49 slide_div.children().first().addClass(current_css); 50 }else{ 51 current_p.next().addClass(from_css); 52 current_p.next().addClass(current_css); 53 } 54 }else if(way=="right"){ 55 if (current_p.prev().length<=0) { 56 slide_div.children().last().addClass(from_css); 57 slide_div.children().last().addClass(current_css); 58 }else{ 59 current_p.prev().addClass(from_css); 60 current_p.prev().addClass(current_css); 61 } 62 } 63 } keyframes完整版js方法

?

?

最終我采用了css3得keyframes方法，源代碼傳送門：https://github.com/HappyBangs/bang_plugins/tree/master/plugin-p-slide

轉(zhuǎn)載于:https://www.cnblogs.com/Mrs-cc/p/4652791.html

總結(jié)

以上是生活随笔為你收集整理的天猫首页迷思之－jquery实现左侧广告牌图片轮播的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。