實現簡單的圖片輪播功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單圖片輪播</title>
<!--
原理：三張圖片垂直放置，顯示區域li固定,獲取當前圖片的index，
每隔2秒將下張圖片的margin-top向上移動圖片的高度，即將該圖片上移到顯示區域
-->
<style>
*{
list-style-type: none;
}
.wrap{
width: 250px;
height: 250px;
position: relative;
left:30%;
overflow: hidden;
border: solid 1px red;
cursor: pointer;
}
.wrap ul{
margin: 0;
padding: 0;
}
.wrap ul li{
width: 250px;
height: 250px;
}
.wrap ul li img{
width:100%;
height: 100%;
}
</style>
<script>
window.onload=function(){
var wrap=document.getElementById("wrap");
var pic=document.getElementById("pic");
var list=pic.getElementsByTagName("li");
var index=0;
var timer=null;
function play(){
timer=setInterval(function(){
pic.style.marginTop=-250*index+‘px‘;
index++;
if(index>=list.length){
index=0;
}
},1000);
}
play();
wrap.onmouseover=function(){
clearInterval(timer);
};
wrap.onmouseout=function(){
play();
};
}
</script>
</head>
<body>
<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
</ul>
</div>
<p></p>
</body>
</html>
實現簡單的圖片輪播功能