標籤：屬性 att 它的 一起 jpg one double sha thread
圖片：輪播.jpg
，所示的輪播，不但要切換大的背景圖，還有文字及其它一些圖片，也要動畫顯示。
當然，這個效果的實現，網上有類似的外掛程式. 不過，也可以自己寫出來. 下面我們就一起來看看。燥起來吧！！！
第一步：
大家暫時不要考慮動態這些的，就是把要
輪播的頁面及內容，全部顯示出來.
( 註：輪播一般也稱投影片播放，下面，我們就把每一次圖片的切換，稱為投影片的切換，每一張投影片就用一個LI來實現，而每個投影片裡還可以包含其它資訊，文字，圖片都可以，將它們用div包起來，然後，用class來指定樣式，讓它顯示到對應的位置 )
如下：
HTML代碼：
<ul>
<li thumb="img/wide1.jpg">
<div class="li1sub1"><img src="img/rb.png"/></div>
<div class="li1sub2"><img src="img/inspira.png"/></div>
<div class="li1sub3">my name is doubleyong</div>
<div class="li1sub4"><a href="#">purcharse</a> </div>
</li>
</ul>
第二步：
將每一張投影片的背景顯示出來
這裡不需要將每個投影片添加樣式，通過在li上添加thumb屬性來指定背景圖片的地址，然後通過JS來添加背景圖片
代碼如下（JS）：
var liarr = document.getElementById("banner").getElementsByTagName("li");
for(var i=0;i<liarr.length;i++){
var imgSrc= liarr.getAttribute("thumb"); liarr.style.backgroundImage=‘url(‘+imgSrc+‘)‘;
}
第三步，就可以來做
投影片的切換
1.
定義兩個全域變數
var
timerArr= []; // 儲存定時器的資料，每一張投影片各種動畫的定時器對象
var
currentSolid = 0; //當前顯示的投影片，從0開始數
2.
顯示第幾張投影片調用的方法
//顯示第幾張投影片，num為顯示的投影片數字，從0開始計算
function current(num){
hide(); //先把所有的投影片隱藏
clearTimer(); //清空之前的所有定時器
liarr[num].style.display="block"; //將要顯示的那張投影片顯示出來
// 上面，實現了顯示了大的背景圖片切換，但除此這外還有其它的內容，並且，還有動效，那如何來完成？
// 重點分析：動效，其它就是開始是一個樣式，最終是另一個樣式，然後，在樣式的改變過程中，加上過渡效果即可
// 最終一個樣式，已經通過class來進行了定義，下面只需要設定，每一張投影片裡的子項目的開始樣式就好，即如何設定？
// 通過在標籤添加屬性的方式來實現
var childArr = liarr[num].getElementsByTagName("div");
for(var i =0 ;i<childArr.length;i++){
childArr.style.top = childArr.getAttribute("data-y")+"px"; //設定元素的開始位置，在元素中的屬性獲得
childArr.style.left = childArr.getAttribute("data-x")+"px"; //設定元素的開始位置，在元素的屬性中獲得
//註：這裡很多的值，來源於元素的屬性，所以，HTML代碼中，將會進行一些添加，加上需要的資料, 詳細查看後面HTML修改後
childArr.style.opacity = 0;
var startTime =childArr.getAttribute("data-start"); //開始時間，也是在屬性中設定
//註：此
setTimeout 實現了傳遞參數，詳情參考：http://bugshouji.com/shareweb/t84-1
var timer =setTimeout(annimal(childArr),parseInt(startTime));
//添加定時器，在指定時添加指定方法，只調一次
timerArr.push(timer); //將定時器放到數組中
}
}
//執行動畫效果的方法
function annimal(ele){
return function(){ //返回一個函數，讓setTimeout執行
var speed = ele.getAttribute("data-speed")/1000; //得到動態時間，在元素屬性中獲得
ele.style.transition = "all "+speed+"s linear"; //添加過渡效果
ele.style.opacity = 1;
ele.style.top="";
ele.style.left="";
//注，上面這兩個清空，不是簡單的清空了樣式裡的值,因為style是行內樣式，指定時它的優先順序高於class,
//這時會應用style裡的樣式，而我們清空樣式裡設定的值，這裡就將應用class裡設定的值
//這就是一個亮點，通過style屬性的設定，來達到兩種不同樣式的應用
}
}
// 隱藏所有的投影片
function hide(){
for(var i=0;i<liarr.length;i++){
liarr.style.display="none";
}
}
//清空之前的所有定時器
function clearTimer(){
for(var i=0;i<timerArr.length;i++){
clearTimeout(timerArr);
}
timerArr.length=0;
}
因，上面的方法，需要在HTML中設定相關的一些屬性，所以，
HTML做了以下修改，如下：
<li thumb="img/wide1.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rb.png"/></div>
<div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/inspira.png"/></div>
<div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">my name is doubleyong</div>
<div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">purcharse</a> </div>
</li>
<span "="" color:#548dd4=""> （有多少張，就添加多少項，裡面的內容也可以設定多個,註：按鈕相應的要求來指定開始位置; js代碼就不能修改,只需要在HTML添加對應的元素即可）.
<li thumb="img/wide1.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rb.png"/></div>
<div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/inspira.png"/></div>
<div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">my name is doubleyong</div>
<div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">purcharse</a> </div>
</li>
<li thumb="img/wide2.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/lightweight.png"/></div>
<div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/macbook.png"/></div>
<div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">哇，動效出來了，好開心</div>
<div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">開心</a> </div>
</li>
<li thumb="img/wide3.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rm.png"/></div>
<div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/bootstrap.png"/></div>
<div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">Bang bang bang</div>
<div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">嗨起來</a> </div>
</li> 摘選自：http://www.bugshouji.com/zhuopingweb/t85
js 多動畫輪播效果
