js實(shí)現(xiàn)圖片切換（動(dòng)畫(huà)版）

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

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

學(xué)習(xí)了妙味課堂的圖片切換（動(dòng)畫(huà)版）

這個(gè)小效果相對(duì)簡(jiǎn)單一點(diǎn)。

知識(shí)預(yù)備：

【1】background-position-x

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

background-position有兩個(gè)屬性值， background-position：x | y，用法上可以對(duì)其一個(gè)屬性單獨(dú)使用 background-position-x 和 background-position-y。

準(zhǔn)備工作完畢，開(kāi)始寫(xiě)代碼

第一步

由于這次需要的div很多，所以采用動(dòng)態(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下，寫(xiě)70個(gè)div，每個(gè)div顯示一張圖片的一小片部分，這樣70個(gè)div能完整的顯示出一張圖片
 for(var i=0;i<70;i++){
 str +='<div style="background-position-x:'+(-10*i)+'px"></div>';
 }
 oWrap.innerHTML = str;
 //獲取70個(gè)div
 var divs = oWrap.getElementsByTagName('div');
　　　　</script>
 </body>

第二步

寫(xiě)tab()函數(shù)，設(shè)置每個(gè)div要做的動(dòng)畫(huà)

tab()函數(shù)

// 每個(gè)div設(shè)置前一個(gè)div的透明度為1，并且設(shè)置自己的透明度為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)";
 }
 }

第三步

寫(xiě)go()函數(shù)，利用定時(shí)器改變tab()函數(shù)的參數(shù)并且適時(shí)的改變背景圖片

go()

//給tab()函數(shù)傳遞n值
 function go(){
 timer = setInterval(function(){
 tab(num);
 num++;
 //一張圖片切換完畢
 if(num == 71){
 clearInterval(timer);
 //切換下一張圖片
 imgNum++;
 //num清0，動(dòng)畫(huà)效果從第一個(gè)div開(kāi)始
 num = 0;
 //當(dāng)切到最后一張圖片時(shí)，在從第一張開(kāi)始切換
 if(imgNum == 6){
 imgNum = 1;
 }
 //切換完一張圖片時(shí)切換下一張圖片的間隔
 setTimeout(go,800);
 }
 //div變換的速度
 },80);
 }

總結(jié)：這個(gè)動(dòng)畫(huà)效果實(shí)現(xiàn)起來(lái)簡(jiǎn)單，代碼問(wèn)題不大，主要就是實(shí)現(xiàn)思路的問(wèn)題。

源碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>圖片切換（動(dòng)畫(huà)版）</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下，寫(xiě)70個(gè)div，每個(gè)div顯示一張圖片的一小片部分，這樣70個(gè)div能完整的顯示出一張圖片
 for(var i=0;i<70;i++){
 str +='<div style="background-position-x:'+(-10*i)+'px"></div>';
 }
 oWrap.innerHTML = str;
 //獲取70個(gè)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，動(dòng)畫(huà)效果從第一個(gè)div開(kāi)始
 num = 0;
 //當(dāng)切到最后一張圖片時(shí)，在從第一張開(kāi)始切換
 if(imgNum == 6){
 imgNum = 1;
 }
 //切換完一張圖片時(shí)切換下一張圖片的間隔
 setTimeout(go,800);
 }
 //div變換的速度
 },80);
 }
 // 每個(gè)div設(shè)置前一個(gè)div的透明度為1，并且設(shè)置自己的透明度為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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: