10 图片无缝滚动
功能：几张图片会向左或向右滚动，鼠标移进移出会停止和继续，点击按钮会切换左右滚动方向
事件：onmouseover,onmouseout,onclick
属性：ul的left,width
用到了计时器，innerHTML，offsetLeft,offsetWidth
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
oUl.style.left=oUl.offsetLeft+speed+'px';
////////////
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="img/0.png"/></li>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
</ul>
</div>
<script src="js1.js"> </script>
</body>
</html>
//////////////css
*{
margin:0;
padding:0;
}
#div1{
width:1000px;
height:100px;
background:yellow;
position:relative;
margin:100px auto;
overflow: hidden;
}
#div1 ul{
top:0;
left:0;
position:absolute;
}
#div1 ul li{
width:200px;
height:100px;
list-style:none;
float:left;
}
#div1 ul li img{
width:200px;
height:100px;
}
////////////////js
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var aBtn1=document.getElementsByTagName("a")[0];
var aBtn2=document.getElementsByTagName("a")[1];
var speed=2;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
var timer=null;
function gogo(){
//Left小写了
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
timer=setInterval(gogo,50);
oUl.onmouseover=function(){
clearInterval(timer);
};
oUl.onmouseout=function(){
timer=setInterval(gogo,50);
};
aBtn1.onclick=function(){
speed=-2;
};
aBtn2.onclick=function(){
speed=2;
};
};
