<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0;
}
li{
list-style: none;
float:left;
}
li img{
width:300px;
height:200px;
}
div{
width:900px;
height:350px;
border:1px solid red;
margin-top: 100px;
margin-left:200px;
overflow: hidden;
position:relative;
}
ul{
width:1000px;
height:300px;
background-color: red;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<a href="">左走</a>
<a href="">右走</a>
<div>
<ul>
<li><img src="images/t1.jpg" alt=""></li>
<li><img src="images/t2.jpg" alt=""></li>
<li><img src="images/t3.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload=function(){
var ul=document.getElementsByTagName('ul')[0];
var li=document.getElementsByTagName('li');
var div=document.getElementsByTagName('div')[0];
var a=document.getElementsByTagName('a');
var speed=-2;
ul.innerHTML=ul.innerHTML+ul.innerHTML;
ul.style.width=li.length*li[0].offsetWidth+"px";//解决ul宽度不够问题 出现没有浮动现象
function move(){
ul.style.left=ul.offsetLeft+speed+"px";
if(ul.offsetLeft<-ul.offsetWidth/2){
ul.style.left=0;//当ul的位移移动到自身一半位置的时候即就是重复的图片组也开始移出div框的时候,让ul的位移为0和div重合
}
if(ul.offsetLeft>0){
ul.style.left=-ul.offsetWidth/2+"px";
//当ul位移忘右走时候 left开始大于零,就把ul往后拖一半因为ul后一半宽度存放的同样的图片
}
}
a[0].onclick=function(){
speed=-2;
};
a[1].onclick=function(){
speed=2;
};
console.log(a[0]);
var timer=setInterval(move,130);
div.onmouseover=function(){
clearInterval(timer);
}
div.onmouseout=function(){
timer=setInterval(move,130);
}
}
</script>
</body>
</html>