实现简单的图片轮播功能
Posted 小安快跑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现简单的图片轮播功能相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于实现简单的图片轮播功能的主要内容，如果未能解决你的问题，请参考以下文章