學習了妙味課堂的圖片切換（動畫版）
這個小效果相對簡單一點。
知識預備：
【1】background-position-x
background-position屬性設置背景原圖像（由 background-image 定義）的位置，意味著使用這個屬性的前提是必須設置背景原圖像background-image。
background-position有兩個屬性值， background-position：x | y，用法上可以對其一個屬性單獨使用 background-position-x 和 background-position-y。
準備工作完畢，開始寫代碼
第一步
由于這次需要的div很多，所以采用動態添加的方式，直接看代碼
<style> body{ margin: 0; background-color: #5e5e5e; } #box{ width: 857px; height: 574px; padding-top: 126px; padding-left:143px; background: url(img/bg.png) no-repeat; margin: 0px auto; } #wrap{ width: 700px; height: 420px; transform-style: preserve-3d; perspective: 800px; } #wrap div{ width: 10px; height: 420px; background: url(img/01.png) no-repeat; float: left; transition: .5s; } </style></head><body> <div id="box"> <div id="wrap"></div> </div> <script> //在wrap下，寫70個div，每個div顯示一張圖片的一小片部分，這樣70個div能完整的顯示出一張圖片 for(var i=0;i<70;i++){ str +='<div style="background-position-x:'+(-10*i)+'px"></div>'; } oWrap.innerHTML = str; //獲取70個div var divs = oWrap.getElementsByTagName('div'); </script> </body>第二步
寫tab()函數，設置每個div要做的動畫
tab()函數
// 每個div設置前一個div的透明度為1，并且設置自己的透明度為0和背景圖片 function tab(n){ // 0 if(divs[n-1]){ divs[n-1].style.opacity = 1; } // 70 if(divs[n]){ divs[n].style.opacity = 0; divs[n].style.backgroundImage = "url(img/0"+imgNum+".png)"; } }第三步
寫go()函數，利用定時器改變tab()函數的參數并且適時的改變背景圖片
go()
//給tab()函數傳遞n值 function go(){ timer = setInterval(function(){ tab(num); num++; //一張圖片切換完畢 if(num == 71){ clearInterval(timer); //切換下一張圖片 imgNum++; //num清0，動畫效果從第一個div開始 num = 0; //當切到最后一張圖片時，在從第一張開始切換 if(imgNum == 6){ imgNum = 1; } //切換完一張圖片時切換下一張圖片的間隔 setTimeout(go,800); } //div變換的速度 },80); }總結：這個動畫效果實現起來簡單，代碼問題不大，主要就是實現思路的問題。
源碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖片切換（動畫版）</title> <style> body{ margin: 0; background-color: #5e5e5e; } #box{ width: 857px; height: 574px; padding-top: 126px; padding-left:143px; background: url(img/bg.png) no-repeat; margin: 0px auto; } #wrap{ width: 700px; height: 420px; transform-style: preserve-3d; perspective: 800px; } #wrap div{ width: 10px; height: 420px; background: url(img/01.png) no-repeat; float: left; transition: .5s; } </style></head><body> <div id="box"> <div id="wrap"></div> </div> <script> //在wrap下，寫70個div，每個div顯示一張圖片的一小片部分，這樣70個div能完整的顯示出一張圖片 for(var i=0;i<70;i++){ str +='<div style="background-position-x:'+(-10*i)+'px"></div>'; } oWrap.innerHTML = str; //獲取70個div var divs = oWrap.getElementsByTagName('div'); go(); //給tab()函數傳遞n值 function go(){ timer = setInterval(function(){ tab(num); num++; //一張圖片切換完畢 if(num == 71){ clearInterval(timer); //切換下一張圖片 imgNum++; //num清0，動畫效果從第一個div開始 num = 0; //當切到最后一張圖片時，在從第一張開始切換 if(imgNum == 6){ imgNum = 1; } //切換完一張圖片時切換下一張圖片的間隔 setTimeout(go,800); } //div變換的速度 },80); } // 每個div設置前一個div的透明度為1，并且設置自己的透明度為0和背景圖片 function tab(n){ // 0 if(divs[n-1]){ divs[n-1].style.opacity = 1; } // 70 if(divs[n]){ divs[n].style.opacity = 0; divs[n].style.backgroundImage = "url(img/0"+imgNum+".png)"; } } </script></body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
