效果圖

制作思路

css、html思路如下：
首先定義一個輪播器大盒子。設置overflow為hidden。設置其寬度，高度、position設置為相對
再在里面套一個圖片盒子，里面加多個img標簽。float設置為left，使圖片橫向排列。每張照片的大小就是輪播器的大小。那么在輪播器范圍內的img’就會顯示出來。而其他的img會因為上面設置的overflow屬性被隱藏。position設置為絕對定位。

js 思路：
在窗口window.οnlοad=function(){
寫一個定時器
設置定時器執行的方法，就是每隔多少秒就把圖片盒子向左移動一張圖片的寬度，也就是讓它的left屬性自減，當減到與盒子一樣長度的時候，left歸0，重新移動。

以上思路很詳細，可以自己敲敲看，我剛寫出來的時候都驚呆了呢……

代碼放心粘，好使！！

css代碼

<style> /*定義大盒子*/#demo{ overflow: hidden;width:200px;height:150px;position: relative;} /*圖片盒子*/#demoimg{width:600px;height:150px;position: absolute;}#demoimg li{float:left;list-style: none;width:200px;height:150px;} /*blue 部分是附加效果，圖片下邊對應的藍色小塊*/#blue{bottom:0;position: absolute;}#blue li{list-style: none;width:30px;height:5px;background:#ccc;float:left;margin: 0 3px;}</style>

html 代碼

<div id="demo"><ul id="demoimg"><li><img src="images/1.png"></li><li><img src="images/2.jpg"></li><li><img src="images/3.png"></li></ul><ul id="blue"><li style="background:blue"></li><li></li><li></li></ul> </div> <!-- 隨幻燈片變換的圖片簡介或者可點擊切換的小點與blue部分原理差不多 -->

Javascript 代碼

<script>var i=0;function qiehuan(){//獲取元素var demoimg = document.getElementById("demoimg");var demoli = demoimg.getElementsByTagName("li");//獲取圖片盒子距左邊的距離給left，圖片的寬度給swidth，//圖片盒子中li即圖片總數給lisvar left = demoimg.offsetLeft;var swidth = demoli[0].offsetWidth;var lis = demoli.length;//left從0開始逐漸遞減，圖片盒子向左移動。//當所有圖片都移動到左邊之后，left=0，重新開始，形成循環播放。if(left>-swidth*(lis-1)){left = left - swidth;demoimg.style.left = left+"px";i = i+1;}else{left = 0;demoimg.style.left = left+"px";i = 0;}//附加效果 blue部分 var dblue = document.getElementById("blue");//通過參數i設置與圖片li對應的blue部分第i個li背景色dblue.getElementsByTagName("li")[i].style.background = "blue";var thisi = dblue.getElementsByTagName("li")[i];var syi = dblue.getElementsByTagName("li");//遍歷blue的所有li元素，設置非當前li的背景色，注意:syi[j]!=thisifor(j=0;j<lis;j++){if(syi[j]!=thisi){syi[j].style.background="#ccc";}}}//定時器，每隔2000毫秒執行一次qiehuan()代碼，數值越小，幻燈片切換越快window.setInterval("qiehuan()",2000); </script>

總結

以上是生活随笔為你收集整理的JS 图片幻灯片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。