JS原生程式碼實現圖片輪播無縫切換的一種思路
阿新 • • 發佈：2019-01-09
JS實現圖片輪播是個老生常談的問題，也是新手的必由之路，在這裡提供一種思路，供大家參考：
1.生成DIV做外框，並設定overflow:hidden； // 每個方法都必須有的
2.建立一個數組arr，放置圖片地址
3.生成兩個並排的圖片img1,img2，初始化圖片地址為arr[0] arr[1] 並使用絕對定位，便於後面移動圖片
4.開一個定時器，間隔一定時間後，img1 img2的left值同時向左移動圖片寬度值的畫素 //移動的時候可以再開個定時器，做滑動的效果
5.當img1的left值為負圖片寬度時，賦予img1的left值為正圖片寬度，並且將陣列的第3張圖片地址賦予img1，繼續向左移動
6.當img2的left值為負圖片寬度時，賦予img2的left值為正圖片寬度，並將陣列的第4張圖片地址賦予img2，繼續向左移動
7.當兩張圖片的圖片地址到了陣列的最後時，迴圈到第一個圖片地址。
這個方法的難點在於：
1.兩張圖片的地址在陣列中是逢2累加的
2.當圖片的地址到了陣列的最後時，需要折回陣列的首位
具體程式碼為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片自動切換</title> </head> <style> body{margin:100px;} p,img,div,ul,li { margin:0;padding:0;} #content { width:600px; height:400px; border:1px solid #F00; position:relative;overflow:hidden;} #img1 { position:absolute;top:0;left:0;} #img2 { position:absolute;top:0;left:600px;} #intro {width:600px; height:60px; position:absolute; top:340px; left:0;} p { width:600px; height:60px; background:#333; opacity:0.5; position:absolute;} span {display:block; width:600px; height:60px; line-height:60px; text-align:center; color:#fff; position:absolute; z-index:2;} </style> <script> /* 兩個圖片位置變換，同時把數組裡的圖片地址賦予圖片 */ window.onload = function(){ var intro = document.getElementById('intro'); var oSpan = intro.getElementsByTagName('span')[0]; var oP = intro.getElementsByTagName('p')[0]; var img1 = document.getElementById('img1');//圖片1 var img2 = document.getElementById('img2');//圖片2 var oUl = document.getElementsByTagName('ul')[0]; var arr = ['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg','img/05.jpg']; //圖片地址 var timer1 = null; var timer2 = null; var timer3 = null; //初始化 var n = 0; var a = 0; var b = 1; intro.style['top'] = '400px'; oSpan.innerHTML = '圖片說明'+(n+1); img1.src = arr[a]; img2.src = arr[b]; timer1 = setInterval(changeImg,3000); timer3 = setInterval(autoText,30); function changeImg(){ clearInterval(timer2); clearInterval(timer3); intro.style['top'] = '400px'; timer2 = setInterval(autoPic,30); timer3 = setInterval(autoText,30); n++; n%=arr.length; oSpan.innerHTML = '圖片說明'+(n+1); }; function autoPic(){ var length1 = parseInt(getStyle(img1,'left'))-10; var length2 = parseInt(getStyle(img2,'left'))-10; img1.style['left'] = length1+'px'; img2.style['left'] = length2+'px'; if(length1==-600){ a+=2; if(a>=arr.length)a-=arr.length; img1.style['left'] = '600px'; img1.src = arr[a]; clearInterval(timer2); } if(length2== -600){ b+=2; if(b>=arr.length)b-=arr.length; img2.style['left'] = '600px'; img2.src = arr[b]; clearInterval(timer2); } }; function autoText(){ var height = parseInt(getStyle(intro,'top'))-2; intro.style['top'] = height +'px'; if(height<=340)clearInterval(timer3); }; function getStyle(obj,str){return obj.currentStyle?obj.currentStyle[str]:getComputedStyle(obj)[str];}; }; </script> <body> <div id="content"> <img id="img1" /> <img id="img2" /> <div id="intro"> <span></span> <p></p> </div> </div> </body> </html>
此程式碼僅實現功能，其中函式還可以繼續優化，本文不再贅述。
轉載請標明作者，謝謝。