3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）...
生活随笔
收集整理的這篇文章主要介紹了
3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前不久我做了一個3d仿酷狗的輪播圖，用的技術原理就是簡單的jquery遍歷+css樣式讀寫。
這次呢，我們換一種思路（呵呵其實換湯不換藥），看到上次那個輪播嗎？你有沒有發現用jquery的animate來寫的話（酷狗那輪播樣式6個其實還好），如果很多的話呢？會怎樣，是不是得寫一大坨？這顯然不是我們想要的，那怎么辦呢？其實既然是樣式嘛，那我們就可以封成一個css類，一個類名，我們動態的把這些類名給添加給對應的位置即可，代碼簡單很多。先上一個gif吧。
單純的不用js的h5+css3也是可以有很強大的動畫效果，不過單純的h5+c3缺少行為交互層，還是比較推薦用js，代碼也比較少！
這個gif不會弄。隨便弄了個（不好看這不是重點）。
咱先來對比下封成類名和一個個樣式來設置兩者的優劣：
之前遍歷樣式的代碼是這樣的：
設置成類名后的遍歷是這樣的：
如果js的樣式有很多種，不僅僅是上面6種的話，你會發現這些樣式跟你看一串json數據沒區別了，你會很累（當然這僅僅是夸張說法），代碼也是一大坨，嗯對，就是一大坨，你能忍么？反正我不能忍。js的函數式編程一直與優雅不沾邊，當然后續的ES6和ES7，特別是模塊化思想的引入，其實整體上好很多了，以后我們也是可以優雅而又嚴謹的寫代碼= =
同樣的還是上一下demo吧：
?html+js
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>名師風采</title> 6 <link rel="stylesheet" href="css/dc-carousel.css"> 7 <script src="js/jquery-3.1.1.min.js"></script> 8 <script> 9 $(function(){ 10 var $dc_img=$('.dc_carousel_img li'); 11 var $dc_point=$('.dc_carousel_point li'); 12 var $dc_left=$('.previous'); 13 var $dc_right=$('.next'); 14 var nowTime=0,index=0,my; 15 function dc_list(i){ 16 $dc_point.eq(i).addClass("current_point").siblings().removeClass('current_point'); 17 } 18 19 var dc_class=[]; 20 //動態修正class 21 function slide(flag){ 22 $dc_img.each(function(i){ 23 dc_class[i]=$(this).attr("class"); 24 }); 25 console.log(dc_class); 26 $dc_img.each(function(i){ 27 console.log($(this).attr("class")); 28 if(flag){ 29 var a=i+1; 30 a%=$dc_img.length; 31 } 32 else{ 33 var a=i-1; 34 a<0?a=$dc_img.length-1:a; 35 } 36 $(this).css("transition","").removeClass(); 37 if(dc_class[a]!="others"){ 38 // &&dc_class[a-1]!="others" 39 $(this).css("transition","0.5s"); 40 } 41 $(this).addClass(dc_class[a]); 42 }) 43 } 44 //左右變動函數 45 function dc_leftImg(){ 46 if(new Date()-nowTime>500){ 47 nowTime=new Date(); 48 index--; 49 index<0?index=$dc_point.length-1:index; 50 dc_list(index); 51 slide(false); 52 } 53 } 54 function dc_rightImg(){ 55 if(new Date()-nowTime>500){ 56 nowTime=new Date(); 57 index++; 58 index=index%$dc_point.length; 59 dc_list(index); 60 slide(true); 61 } 62 } 63 //左右按鈕點擊函數 64 $dc_left.click(function(){ 65 dc_leftImg(); 66 autoPlay(false); 67 }); 68 $dc_right.click(function(){ 69 dc_rightImg(); 70 autoPlay(true); 71 }); 72 /** 73 * 自動播放函數 74 * */ 75 var time; 76 function autoPlay(flag){ 77 clearInterval(time); 78 if(flag){ 79 time=setInterval(dc_rightImg,2000); 80 } 81 else{ 82 time=setInterval(dc_leftImg,2000); 83 } 84 my=autoPlay.arguments[0]; 85 } 86 autoPlay(true); 87 88 $dc_img.mouseover(function(){ 89 clearInterval(time); 90 console.log($(this)); 91 }); 92 $dc_img.mouseout(function(){ 93 autoPlay(my); 94 }); 95 96 }) 97 </script> 98 </head> 99 <body> 100 <div class="box"> 101 <div class="dc_carousel" id="dc_carousel"> 102 <div class="dc_carousel_img"> 103 <ul> 104 <li class="first"><a href="javascript:;"><img src="images/teacher1.jpg" alt=""></a></li> 105 <li class="second"><a href="javascript:;"><img src="images/teacher2.jpg" alt=""></a></li> 106 <li class="third"><a href="javascript:;"><img src="images/teacher3.jpg" alt=""></a></li> 107 <li class="others"><a href="javascript:;"><img src="images/teacher4.jpg" alt=""></a></li> 108 <li class="others"><a href="javascript:;"><img src="images/teacher7.jpg" alt=""></a></li> 109 <li class="others"><a href="javascript:;"><img src="images/teacher8.jpg" alt=""></a></li> 110 <li class="others"><a href="javascript:;"><img src="images/teacher9.jpg" alt=""></a></li> 111 <li class="last_second"><a href="javascript:;"><img src="images/teacher5.jpg" alt=""></a></li> 112 <li class="last"><a href="javascript:;"><img src="images/teacher6.jpg" alt=""></a></li> 113 </ul> 114 </div> 115 <div class="dc_carousel_point"> 116 <ul> 117 <li class="current_point"></li> 118 <li></li> 119 <li></li> 120 <li></li> 121 <li></li> 122 <li></li> 123 <li></li> 124 <li></li> 125 <li></li> 126 </ul> 127 </div> 128 <span class="previous dc_left"><img src="images/left.png" alt=""></span> 129 <span class="next dc_right"><img src="images/right.png" alt=""></span> 130 </div> 131 </div> 132 </body> 133 </html>css
html,body,div,ol,ul,li,p,h1,h2,h3,h4,h5,h6,table,dt,dd,span,input,img{margin:0;padding:0}ul,li{list-style:none}a{text-decoration:none}.dc_left{float:left}.dc_right{float:right}.dc_clear{content:"";display:block;clear:both}.box{width:800px;height:300px;margin:20px auto 0;box-shadow:0 0 10px #000;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;position:relative}.box .dc_carousel{width:100%;height:100%}.box .dc_carousel .dc_carousel_img{width:100%;height:90%;overflow:hidden;position:relative}.box .dc_carousel .dc_carousel_img ul{width:100%;height:100%;transform-style:preserve-3d;perspective:600px}.box .dc_carousel .dc_carousel_img ul li{width:20%;height:90%;position:absolute;box-shadow:-5px 5px 15px #333;-webkit-box-shadow:-5px 5px 15px #333;-moz-box-shadow:-5px 5px 15px #333;-o-box-shadow:-5px 5px 15px #333;opacity:0}.box .dc_carousel .dc_carousel_img ul li img{width:100%;height:100%}.box .dc_carousel .dc_carousel_img ul .others{top:-40%}.box .dc_carousel .dc_carousel_img ul .first{left:40%;opacity:1}.box .dc_carousel .dc_carousel_img ul .second{left:60%;transform:rotateY(40deg) scale(.5);opacity:1}.box .dc_carousel .dc_carousel_img ul .last{left:20%;transform:rotateY(-40deg) scale(.5);opacity:1}.box .dc_carousel .dc_carousel_img ul .third{left:70%;transform:rotateY(50deg) scale(.2);opacity:1}.box .dc_carousel .dc_carousel_img ul .last_second{left:10%;transform:rotateY(-50deg) scale(.2);opacity:1}.box .dc_carousel .dc_carousel_img ul .dc_change{transform:translate3d(30px, 30px, 30px)}.box .dc_carousel .dc_carousel_point{width:100%;text-align:center;position:absolute;z-index:30}.box .dc_carousel .dc_carousel_point li{width:10px;height:10px;list-style:none;border-radius:50%;background:#bbb;display:inline-block}.box .dc_carousel .dc_carousel_point .current_point{background:#3ff}.box .dc_carousel .previous,.box .dc_carousel .next{position:absolute;top:40%;font:30px "Times New Roman";cursor:pointer}.box .dc_carousel .next{left:94%}跟上一次的原理類似，但這個不同的是用類名來代替并動態修改類名，可拓展性更強，且修改只需修改css樣式即可，簡單快捷方便，另外一個是圖片是可以無限拓展的，不過需要把新加的圖片放在中間并加上others類名，很方便吧~~
轉載于:https://www.cnblogs.com/dorseych/p/9033754.html
總結
以上是生活随笔為你收集整理的3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Yocto动态软件包管理（Runtime
- 下一篇： conda 导出环境文件的方法（文件方法