本次要實現的是天貓首頁每個樓層左側的圖片輪播效果。見圖：
功能點有：點擊右箭頭向右滑動；點擊左箭頭向左滑動；什么都不點自動滑動。
1.實現樣式。
簡單分析一下大概的html結構。一個大的div里面包含兩個箭頭以及輪播的容器。圖片是由三個p標簽組成，每個p標簽中包含3個圖片。
css見github 1 <div class="floor-show-middle"> 2 <a class="floor-show-middle-arrow arrow-left" title="上一個幻燈片"></a> 3 <a class="floor-show-middle-arrow arrow-right" title="下一個幻燈片"></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. 圖片輪播動畫效果的實現。

　　為了方便描述，給三個需要展示的p編個號：①②③。

　　輪播的難點1：圖片沒法成圓圈式排列，怎么才能讓處于邊界的p①在向右滑動的時候左邊有個③在向右滑動，and 怎么讓處于邊界的p③在向左滑動的時候右邊有個①在向右滑動。

　　輪播的難點2：由于無法控制用戶點擊箭頭的速度，如果前一個圖片移動沒完成就進行下一個圖片移動，會造成混亂。解決辦法很簡單，為每個div增加一個屬性is_animating，當動畫開始設置為true，監聽動畫結束事件，結束后設置為false；每次在執行動畫之前都需要判斷這個變量。

　　如果三個p標簽按照從左至右依次不疊加排列①②③，需要做到滑動效果的話②是很好實現，而①在從左至右滑動時因為左邊沒有元素了，所以無法循環滑動，同理③也是。好了，想辦法。

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

　　1.將div.brand-slide-bg中的樣式設置為position:absolute;這樣就可以使用left，right屬性來讓該div移動；

　　2.當第一個①在可視區域內時，點擊左箭頭 -> div向左移動1個單位 -> ?移動完成后，將div的left的值改為-300px，讓第二個③迅速處于可視區域

　　實現方法一：使用jquery中，animate方法移動（未添加動畫原子性判斷，剛開始寫復用性還不太好，可以參考下思想）：

右箭頭處理函數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");//當前圖片的索引 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 //回調函數，刪除添加的p 18 slide_div.children("p").first().remove();//刪除為了滑動而添加的元素 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);//相對于父容器向左移動的值 25 slide_div.animate({ 26 left:left 27 },800); 28 } 29 slide_div.attr("index",pic_index); 30 autoTask=setTimeout("autoMove()",2000); 31 } 自動輪播處理函數animate()

　　實現方法二：使用css3的屬性transition來移動：

　　CSS3特性：transition＋transform

　　以下是一個點擊右邊箭頭的幻燈片向右翻動的代碼，通過監聽webkitTransitionEnd方法監聽transition的結束時間，結束的時候快速將幻燈片的位置換到－100px的初始位置。

1 $(".arrow-right").click(function(){ 2 var slide_div=$(this).siblings(".brand-slide-content").children(".brand-slide-bg");//滑動幻燈片的父div 3 var index=slide_div.attr("index");//當前圖片的索引，默認為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 /*小的滑動的幻燈片end*/ 14 15 $(".brand-slide-bg").bind('webkitTransitionEnd', function(){ 16 index=$(this).attr("index");//監聽動畫完成的動作 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右箭頭處理函數

?

方法二：p標簽疊加排列，為每個p添加每個滑動方向的動畫事件。

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

這次用css3的新特性，@ keyframes來實現。通過 @keyframes 規則，能夠創建動畫。配合css屬性animation來使用。

css樣式定義：

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

keyframe中需要定義from和to兩個key的值，表示動畫開始時元素的樣式和動畫結束時元素的樣式。from，to也可以用百分比來代替，更精確

animate屬性定義使用哪個動畫、動畫時常、動畫執行次數。

設計上，為每個p元素在不同場景下劃分不同css類，定義不同的動畫。

.moveToLeft表示從當前位置向左移動。.moveFromLeft表示從左移動到指定位置。依次類推。

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

舉個例子：p有①②③三個，默認都是隱藏狀態。當前可視的只有②，點擊左箭頭。給p賦值的場景如下：②新增.moveToLeft，③新增moveFromRight，動畫完成后，②去掉.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;}//動畫未結束不能開始 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

轉載于:https://www.cnblogs.com/Mrs-cc/p/4652791.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。