js實現(xiàn)圖片切換（動畫版）

更新時間：2016年12月25日 09:22:35 作者：老板丶魚丸粗面

本文主要對javascript實現(xiàn)圖片切換（動畫版）的方法進行步驟分析、實例介紹，具有很好的參考價值，需要的朋友一起來看下吧

學習了妙味課堂的圖片切換（動畫版）

這個小效果相對簡單一點。

知識預備：

【1】background-position-x

background-position屬性設置背景原圖像（由 background-image 定義）的位置，意味著使用這個屬性的前提是必須設置背景原圖像background-image。

background-position有兩個屬性值， background-position：x | y，用法上可以對其一個屬性單獨使用 background-position-x 和 background-position-y。

準備工作完畢，開始寫代碼

第一步

由于這次需要的div很多，所以采用動態(tài)添加的方式，直接看代碼

<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()函數(shù)，設置每個div要做的動畫

tab()函數(shù)

// 每個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()函數(shù)，利用定時器改變tab()函數(shù)的參數(shù)并且適時的改變背景圖片

go()

//給tab()函數(shù)傳遞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);
 }

總結：這個動畫效果實現(xiàn)起來簡單，代碼問題不大，主要就是實現(xiàn)思路的問題。

源碼：

<!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()函數(shù)傳遞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>

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: