第一种方法:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
position: relative;
880px;
height:220px;
margin:50px auto;
border:1px solid #999;
overflow: hidden;
}
#box ul{ /*ul不能设置宽度*/
height:200px;
position:absolute;
top:0;
left:0px;
padding:10px 0;
}
#box ul li{
200px;
height:200px;
float:left;
padding:0 10px;
list-style: none;
}
#box ul li img{
200px;
height:200px;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById("box");
var oUl=oBox.children[0];
var aLi=oUl.getElementsByTagName('li');
var oLeft=document.getElementById("left");
var oRight=document.getElementById("right");
var timer=null;
var speed=0;
oUl.innerHTML+=oUl.innerHTML; //复制一份oUl的内容
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//设置oUl的宽度
clearInterval(timer);
function tab(){
var l=oUl.offsetLeft+speed;
//向左运动,当l小于oUl宽度的一半时,l=0
if(l<=-oUl.offsetWidth/2){
l=0;
}
//向右运动,当l大于0时,l=oUl宽度的一半
if(l>0){l=-oUl.offsetWidth/2}
oUl.style.left=l+'px';
}
timer=setInterval(tab,30);
oLeft.onclick=function(){
speed=-6;
}
oRight.onclick=function(){
speed=6;
}
oBox.onmouseover=function(){
clearInterval(timer);
}
oBox.onmouseout=function(){
timer=setInterval(tab,30);
}
document.onkeydown=function(ev){
var e=ev||event;
if(e.keyCode==37){
speed=-6;
}
if(e.keyCode==39){
speed=6;
}
}
}
</script>
</head>
<body>
<input type="button" id="left" value="向左"/>
<input type="button" id="right" value="向右"/>
<div id="box">
<ul>
<li><img src="img/0.jpg"></img></li>
<li><img src="img/1.jpg"></img></li>
<li><img src="img/2.jpg"></img></li>
<li><img src="img/3.jpg"></img></li>
</ul>
</div>
</body>
</html>
第二种方法:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
position: relative;
880px;
height:220px;
margin:50px auto;
border:1px solid #999;
overflow: hidden;
}
#box ul{
height:200px;
position:absolute;
top:0;
left:0px;
padding:10px 0;
}
#box ul li{
200px;
height:200px;
float:left;
padding:0 10px;
list-style: none;
}
#box ul li img{
200px;
height:200px;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById("box");
var oUl=oBox.children[0];
var aLi=oUl.getElementsByTagName('li');
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
var timer=0;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
var w=oUl.offsetWidth/2;
var l=0; //走的距离
var speed=0; //运动的速度
function tab(){
l+=speed;
oUl.style.left=(l%w-w)%w+'px'; //l%w保证向右的left不会超过0，保证向左的l等于left
}
clearInterval(timer);
timer=setInterval(tab,30);
oLeft.onclick=function(){
speed=-6;
}
oRight.onclick=function(){
speed=6;
}
oBox.onmouseover=function(){
clearInterval(timer);
}
oBox.onmouseout=function(){
timer=setInterval(tab,30);
}
document.onkeydown=function(ev){
var e=ev||event;
if(e.keyCode==37){speed=-6}
if(e.keyCode==39){speed=6}
}
}
</script>
</head>
<body>
<input type="button" id="left" value="向左" />
<input type="button" id="right" value="向右" />
<div id="box">
<ul>
<li><img src="img/0.jpg"></img></li>
<li><img src="img/1.jpg"></img></li>
<li><img src="img/2.jpg"></img></li>
<li><img src="img/3.jpg"></img></li>
</ul>
</div>
</body>
</html>