js 圖片輪播

04-12

網站的圖片輪播目前已經是見怪不怪了，但是網上的我總感覺太亂，代碼不清晰，結合了網上的大神們的代碼，作為一名走在前端路上的小菜鳥的我自己寫了一個，由於水平畢竟有限，可能不太完美，廢話不多說了，直接上代碼。

效果截圖：

js 代碼如下

function scroll(){

var Scroll=document.getElementById("scroll");

var img=Scroll.getElementsByTagName(img);

var oDiv=document.getElementById("tab");

var btn=oDiv.getElementsByTagName("input");

var start=null;

//點擊按鈕控制圖片播放

function btnOnclick(){

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

btn[i].index=i;

btn[i].onclick=function(){

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

btn[i].style.background="white";

img[i].style.display="none";

}

this.style.background="crimson";

//控制圖片顯示

img[this.index].style.display = inline;

};

}

//圖片自動播放

function automatic(){

var pos=0;

var len = img.length;

setInterval(function(){

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

btn[i].style.background="white";

}

},3000);

setInterval(function(){

btn[pos].style.background="crimson";

img[pos].style.display = none;

pos = ++pos == len ? 0 : pos;

btn[pos].style.background="white";

img[pos].style.display = inline;

},3000);

}

btnOnclick();

automatic();

};

html 代碼如下

<html>

<head>

<style>

#tab input{ outline: none; width:60px;height:15px;background-color: white;border: 0px ;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;border-top-left-radius: 25px;border-top-right-radius: 25px;}

#tab{position: absolute;top:600px;left: 45%;}

#scroll{width: 100%; height: 500px;overflow:hidden;}

#scroll img{width: 100%; height: 500px;display:block;}

</style>

</head>

<body>

</div>

</div>

</body>

</html>