<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
div{
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background: red;
overflow:hidden ;
}
div ul{
position: absolute;
left: 0;
top: 0;
}
div ul li{
width: 178;
height: 108;
float: left;
list-style : none;
}
</style>
<script>
window.onload = function () {
var aa = document.getElementById("div1");
var bb = aa.getElementsByTagName("ul")[0];
var cc = bb.getElementsByTagName("li");
var time = null;
var speed = 2;
bb.innerHTML = bb.innerHTML+bb.innerHTML;
bb.style.width = cc[0].offsetWidth*cc.length+'px';
function over(){
//向左滑动
if(bb.offsetLeft<-bb.offsetWidth/2){
bb.style.left = 0;
}
if(bb.offsetLeft>0){
bb.style.left = -bb.offsetWidth/2+'px';
}
//不是0的时候,一定记得加 px
bb.style.left = bb.offsetLeft+speed+'px';
}
//打开定时器
time = setInterval(over , 50);
aa.onmousemove = function (){
//关闭定时器
clearInterval(time);
};
aa.onmouseout = function (){
time = setInterval(over , 50);
};
document.getElementsByTagName("a")[0].onclick = function (){
speed = -2;
};
document.getElementsByTagName("a")[1].onclick = function (){
speed = 2;
};
};
</script>
</head>
<body>
<a href="#">向左走</a>||<a href="#">向右走</a>
<div id="div1">
<ul>
<li><img src="../img/1.jpg" /></li>
<li><img src="../img/2.jpg" /></li>
<li><img src="../img/3.jpg" /></li>
<li><img src="../img/4.jpg" /></li>
</ul>
</div>
</body>
</html>