基本效果如下：
實現了三張圖片自動輪播+按鍵點擊切換的效果。
基本思想：
圖片輪播的效果和老式電影院的膠片放映形式很相似，在老式的電影院放映中，使用長長的膠片記錄影片，膠片上是按順序排列的一系列圖片，通過快速通過放映機放映口，使這些圖片產生一個連貫的切換效果，形成了動態的影片。所以，這里圖片輪播的形式也可以采用這種方式來形成動畫效果。
形式如下圖：
（黑框即我們的最外層的容器，充當放映機的存在；綠框就是膠片，上面搭載着很多的圖片；粉框內即我們要輪播的圖片）
從上圖出發，我們要做到圖片輪播，那么只需要完成以下部分即可。
1.設置一個最外層的容器，這個容器就是我們要展示圖片的區域，如上面的黑框部分，用overflow:hidden將超出顯示區域的內容全部隱藏掉。
2.在最外層容器內設置一個膠片容器，用來將要展示的圖片按從左到右的順序排放，比如使用ul，將其寬度設成最外層容器寬度*N（圖片數量）,並且設置絕對定位position:absolute,因為我們要通過控制left屬性來移動整個膠片實現圖片切換的效果。
3.在膠片容器里面使用li來存放要展示的圖片，使用float:left讓所有圖片在膠片容器里面從左到有排列。
4.使用js修改left值控制膠片容器向左或向右移動，通過循環定時器進行連續小幅度修改left以達到動畫的連貫效果。
以下為代碼實現，可以作為參考：
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--最外層的容器充當放映機--> <div id="container"> <!--第二層充當膠卷,用來存放多張圖片--> <ul id="content"> <li class="list"><img src="img/1.jpg" alt=""></li> <li class="list"><img src="img/2.jpg" alt=""></li> <li class="list"><img src="img/3.png" alt=""></li> </ul> </div> <button id="moveLeft">點我切換</button> <script src="js/main.js"></script> </body> </html>
css部分
/*初始化*/ *{ padding:0; margin:0; } /*作為放映機存在的最外層容器,固定寬高,通過overflow隱藏超出其區域的內容*/ #container{ width:560px; height:300px; overflow: hidden; position: relative; } /*這個容器充當膠卷設成絕對定位用來存放多個圖片,圖片排在一行里面*/ #content{ list-style: none; width:2000px; position: absolute; left:0; right:0; } /*這是每張圖片的設置,圖片大小和最外層的放映機一樣,並通過float讓其排在同一行里面*/ .list{ width:560px; float: left; } /*這是按鈕*/ #moveLeft{ width:100px; }
JS部分
//使用自執行函數隔離作用域 var Slider=(function () { //記錄left的值 var moveLeft=0; // 初始化,綁定輪播事件和點擊事件 function init(){ var content=document.getElementById('content'); var button1=document.getElementById('moveLeft'); //此處為自動輪播 setInterval(animate,5000,content,20); //此處為綁定按鈕進行點擊切換輪播 button1.addEventListener('click',function (e) { setTimeout(animate,100,content,20); }); } //通過定時器實現輪播的動畫效果 function animate(content,speed) { if(moveLeft===0){ var timer1=setInterval(function () { moveLeft-=speed; if(moveLeft>-560) { content.style.left=moveLeft+'px'; } else if(Math.abs(moveLeft+560)<speed){ content.style.left=-560+'px'; clearInterval(timer1); }else{ clearInterval(timer1); } },10); }else if(moveLeft===-560){ var timer2=setInterval(function () { if(moveLeft>-1120) { moveLeft -= speed; content.style.left=moveLeft+'px'; } else if(Math.abs(moveLeft+1120)<speed){ content.style.left=-1120+'px'; clearInterval(timer2); }else{ clearInterval(timer2); } },10); }else if(moveLeft===-1120){ var timer3=setInterval(function () { if(moveLeft<0){ moveLeft+=2*speed; content.style.left=moveLeft+'px'; } else if(Math.abs(moveLeft)<2*speed){ content.style.left=0+'px'; clearInterval(timer3); }else{ clearInterval(timer3); } },10); } } return{ init:init, animate:animate } })(); Slider.init();