天猫首页迷思之-jquery实现左侧广告牌图片轮播
功能點有:點擊右箭頭向右滑動;點擊左箭頭向左滑動;什么都不點自動滑動。
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实现左侧广告牌图片轮播的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 安德鲁斯Selector简介
- 下一篇: [No0000166]CPU的组成结构及