本文實例為大家分享了輪播的具體代碼，自動輪播，居中顯示，供大家參考，具體內容如下

#div1{

width: 192px;

height: 120px;

border: 1px solid gray;

margin: 0 auto;

position: relative;

overflow: hidden;

}

#div1 img{

position: absolute;

}

//獲取頁面元素

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var imgs = div1.getElementsByTagName('img');

//初始化頁面圖片的位置

window.οnlοad=function(){

for(var i=0; i

imgs[i].style.left = i*192 +'px'

}

};

//輪播移動的函數

function imgMove(){

var b1 = false;

for(var i = 0; i < imgs.length; i++) {

imgs[i].style.left = imgs[i].offsetLeft-1 + 'px';

if(imgs[i].offsetLeft==0){

b1=true;

if(i==0)

imgs[imgs.length-1].style='576px';

else

imgs[i-1].style.left='576px'

}

}

if(!b1)

setTimeout(imgMove,20);

else

setTimeout(imgMove,2000);

}

setTimeout(imgMove,3000);

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

總結

以上是生活随笔為你收集整理的自动图片轮播php源码,js实现自动图片轮播代码的全部內容，希望文章能夠幫你解決所遇到的問題。

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