js輪播圖的實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
border:1px solid red;
width:218px;
height:290px;
margin:50px auto;
}
.show{
display:inline-block;
}
.hide{
display:none;
}
img{
width:218px;
}
</style>
<script>
//頁面載入後
window.onload = function(){
lunbo();
}
//輪播
var id;
var n = 0;//輪播次數
function lunbo(){
//啟動定時器
id = setInterval(function(){
n++;
var imgs = document.getElementsByTagName("img");
//將所有的圖片隱藏
for(var i=0;i<imgs.length;i++){
imgs[i].className = "hide";
}
//將下一張圖片顯示
var index = n%imgs.length;
imgs[index].className = "show";
},2000);
}
function stop(){
clearInterval(id);
}
</script>
</head>
<body>
<!--
hover不是事件,是偽類選擇器!
onmouseover是滑鼠懸停事件.
onmouseout是滑鼠離開事件
-->
<div onmouseover="stop();"
onmouseout="lunbo();">
<img src="../image/01.jpg" />
<img src="../image/02.jpg" class="hide"/>
</div>
</body>
</html>