<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
position:absolute; /* 用ul来做无缝滚动,所以要定位*/
400%; /*里面有4张图片*/
}
.box{
600px;
height:200px;
border:1px solid black;
background-color: pink;
margin:100px auto;
position:relative;
overflow:hidden;
}
img{
vertical-align: top;/*去除图片底部的三像素距离*/
}
.box ul li{
float:left;
}
</style>
</head>
<body>
<div class="box" id="demo">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/01.jpg" alt=""></li> <!--最后面插入两张和前两张一样的图片，轮播图的原理-->
<li><img src="images/02.jpg" alt=""></li>
</ul>
</div>
<script>
var demo=document.getElementById("demo");
var ul=demo.children[0];
var num=0;
var Timer=null;
Timer=setInterval(zidongbofang,3);
function zidongbofang()
{
num--;
// if(num<=0 && num>= -1200)
// {
// ul.style.left=num+"px"; //num值在-1200到0之间，left的值就是num
// }
// else{
// ul.style.left=0;//num值小于-1200,图片立刻从第五张的开头跳到第一张图片的开头，left值立刻等于0停下来
// num=0;
// }
num<= -1200? num=0 : num; //if-else的判断，相当于
ul.style.left=num+"px";
}
demo.onmouseover=function() //鼠标一经过，定时器请清除，自动播放暂停
{
clearInterval(Timer);
}
demo.onmouseout=function()
{
Timer=setInterval(zidongbofang,3); //鼠标一离开，定时器重新开启，继续自动播放
}
</script>
</body>
</html>