說到輪播圖，其實只要是跟web開發相關的無論是前端后端應該都不陌生，各種各樣的輪播圖，從以前的單純的平面山水畫遮蓋滑動或滾動，到Jquery的animate甚至是h5+css3，各種炫酷的輪播圖更是層出不窮，其實它們看着都很炫酷，但實際實現的原理很簡單，我們來試着扒一扒看看：
以下我要說的輪播圖呢，是這樣的：
那具體是怎么實現的呢？
先給你看張圖，看似很炫酷的輪播圖實際上的這樣的：
或者說是這樣的：
好了，它跟以往的拖ul或上浮下沉不同，它最大的特點是樣式是被保存起來了，再在下一個規定好的時間幀讀，只不過這時候不是a來讀a，而是a的上一個或下一個咱先稱之為b吧來讀a的屬性，看到這里你會問了，需要哪些屬性呢？其實你應該很快就可以看出來，都分別是什么呢？寬高？還有嗎？top,left？還有嗎？透明度？還有嗎？垂直於我們電腦屏幕的z軸？是的，其實也就這些，沒其他的了。
不上代碼你肯定又覺得我是忽悠你的了，咱來上代碼：
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿酷狗輪播組件jq版本</title> <link rel="stylesheet" href="../css/kugou_lunbo.css"> <script type="text/javascript" src="../../jquery-3.2.1.min.js"></script> <!--<script type="text/javascript" src="../js/kugou_lunbo.js"></script>--> <script src="../js/dc_carousel.js" type="text/javascript"></script> </head> <body> <div class="dc_carousel" id="dc_carousel"> <div class="dc_carousel_img"><!--這個是放圖片的--> <ul> <li class="first">1</li> <li class="second">2</li> <li class="third">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li class="second_last">9</li> <li class="last">10</li> </ul> </div> <div class="dc_carousel_point"><!--這個是圖片對應小圓點的--> <ul> <li class="current_point"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <span class="previous dc_left"></span><!--左右按鈕--> <span class="next dc_right"></span> </div> </body> </html>
css
html,body,div,ol,ul,li,p,h1,h2,h3,h4,h5,h6,table,dt,dd,span,input{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}.dc_carousel{width:900px;height:400px;margin:100px auto;box-shadow:0 0 5px #333;-webkit-box-shadow:0 0 5px #333;-moz-box-shadow:0 0 5px #333;-o-box-shadow:0 0 5px #333;position:relative}.dc_carousel .dc_carousel_img{width:100%;height:90%;position:relative}.dc_carousel .dc_carousel_img li{position:absolute;font:100px 楷體;background:#333}.dc_carousel .dc_carousel_img .first{width:70%;height:100%;opacity:1;filter:alpha(opacity=100);text-align:center;background:#f00;left:15%;z-index:10}.dc_carousel .dc_carousel_img .second{width:49%;height:70%;opacity:1;filter:alpha(opacity=100);text-align:right;background:#00f;top:15%;left:51%;z-index:9}.dc_carousel .dc_carousel_img .third{width:30%;height:40%;background:#ff0;top:30%;left:100%;z-index:8}.dc_carousel .dc_carousel_img .last{width:49%;height:70%;opacity:1;filter:alpha(opacity=100);background:#00f;top:15%;z-index:9}.dc_carousel .dc_carousel_img .second_last{width:30%;height:40%;background:#ff0;top:30%;left:-30%;z-index:8}.dc_carousel .dc_carousel_point{width:100%;height:auto;z-index:30;text-align:center}.dc_carousel .dc_carousel_point li{width:10px;height:10px;background:#333;border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%;display:inline-block;cursor:pointer}.dc_carousel .dc_carousel_point .current_point{background:#3ff}.dc_carousel span{width:40px;height:40px;top:37%;position:absolute;z-index:55;opacity:1;cursor:pointer}.dc_carousel .next{border-right:10px solid #1aa0ff;border-top:10px solid #1aa0ff;transform:rotateZ(45deg);box-sizing:border-box;right:10px}.dc_carousel .previous{border-left:10px solid #1aa0ff;border-top:10px solid #1aa0ff;transform-origin:20px 20px;transform:rotateZ(-45deg);box-sizing:border-box;left:10px}
js
/** * Created by Administrator on 2018/5/3 0003. */ $(function(){ var dc_left=$(".previous"); var dc_right=$(".next"); var dc_img=$(".dc_carousel_img li"); var dc_point=$(".dc_carousel_point li"); var dc_w=[],dc_h=[],dc_t=[],dc_l=[],dc_o=[],dc_z=[];//這里用了不少數組，其實可以存成一個對象，代碼看起來會更好看一些。 function slide(flag){ //存樣式（屬性） dc_img.each(function(i){ dc_w[i]=$(this).css("width"); dc_h[i]=$(this).css("height"); dc_t[i]=$(this).css("top"); dc_l[i]=$(this).css("left"); dc_o[i]=$(this).css("opacity"); dc_z[i]=$(this).css("zIndex"); }); //取樣式（屬性） dc_img.each(function(i){ if(flag){ var a=i+1; a%=dc_img.length;//有的人應該喜歡寫成a>=dc_img.length?a=0:null;吧？嘿嘿，你看哪個簡單？只是js畢竟只是一門10天創造出來的語言，對數據類型的定義比較不嚴謹，
//其實不僅僅取余，異或，同或等等在數據的處理上也有很大的妙用，這里算小試牛刀了。 } else{ var a=i-1; a<0?a=dc_img.length-1:a; } $(this).css("zIndex",dc_z[a]).animate({ width:dc_w[a], height:dc_h[a], left:dc_l[a], top:dc_t[a], opacity:dc_o[a] },400); }) } var time=setInterval(function(){ slide(1); },2000); });
當然啦，這個只是初級版，為什么這么說呢？你說沒按鈕功能啊？為啥要按鈕功能呢？按鈕功能沒必要，對你理解原理上的東西沒幫助，這種讀寫樣式的方式，配合動畫不僅僅做輪播，canvas那些也有很強大的應用的，我們理解它的原理了，很多東西也跟着通了，不希望的是過來黏貼下代碼，有個demo出來交差但實際上一知半解，這樣就沒意思了。
總結一下吧：這個輪播呢？可以大致分成幾部分來完成：
第一步：遍歷我們放圖片那一組元素（可以是li，也可以是其他），把我們要的那些屬性（上面那個）給取下來。這之前呢，我們是先要通過css把相應的樣式設置好，這樣以便於后面獲取。
第二步：取到的元素放在定義好的數組內（對象也行，類似json那樣），再把每個數組里的屬性賦回去（記住賦回去之后，又像之前讀取一樣，再把所有的值讀下來,this是個好東西呵呵，你不用再去復雜的設置指針，這兩步是最關鍵的），但這時候就不是a賦給a了，賦給b或者c，相信這個選擇器的知識我就不說了吧？不懂也可以看上面代碼。
第三步：開一個定時器，其實開不開沒所謂，我只是需要一個觸發條件，就是什么時候你要把數組的值賦回去？你不說或者不定義，程序不知道啊，所以僅僅算是一個觸發條件，你也可以用個點擊事件也行。
第四步：這個第4步可有可無，只不過由於開頭是說的3d動畫輪播，這里不說下動畫有點說不過去，用jq的animate是比較方便快捷的，當然有個不好的地方是animate動畫變動的那一段時間你是做不了啥事的(會有顯示bug的，當然也有解決辦法，只不過目前想到的這個解決辦法不太滿意，沒有從根本上解決delay這個東西，js是異步的，定時器那些也不會有這個同步的東西在阻塞你，不用去管，只需明白上面的原理即可，扯遠了...)。
希望各位有所收獲！