例如分析页面结构
参考代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片无缝滚动</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
img{
border:0;
}
#rollDiv{
position:relative;
width:1150px;
height:200px;
margin:0 auto;
}
#rollDiv .rollWrap{
position:relative;
margin:0 auto;
width:1150px;
height:200px;
overflow:hidden;
background:#CCC;
}
#rollDiv .rollWrap ul{
position:absolute;
top:0;
height:0;
}
#rollDiv .rollWrap li{
float:left;
width:200px;
height:200px;
text-align:center;
}
#rollDiv .rollWrap li img{
display:block;
width:196px;
height:196px;
border:2px solid #FFF;
}
#rollDiv .rollWrap li img:hover{
border:2px solid #F00;
}
#rollDiv .rollLeft{
display:block;
position:absolute;
left:0;
top:80px;
width:40px;
height:40px;
opacity:1;
z-index:2;
}
#rollDiv .rollLeft:hover{
opacity:0.8;
}
#rollDiv .rollRight{
display:block;
position:absolute;
right:0;
top:80px;
width:40px;
height:40px;
opacity:1;
z-index:2;
}
#rollDiv .rollRight:hover{
opacity:0.8;
}
</style>
<script type="text/javascript">
window.onload = loadFunction;
function loadFunction()
{
rollPic();
}
function rollPic()
{
//1.获取文档中对象
var oRollDiv = document.getElementById('rollDiv');
var oRollLeft = document.getElementsByClassName('rollLeft')[0];
var oRollRight = document.getElementsByClassName('rollRight')[0];
var oRollWrap = document.getElementsByClassName('rollWrap')[0];
var oUl = oRollWrap.getElementsByTagName('ul')[0];
//2.
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
var oLi = oUl.getElementsByTagName('li');
var timer = null;
var speed = 1;
var moveLeft = true;
var moveRight = false;
//3.
oUl.style.width = oLi[0].offsetWidth * oLi.length + 'px';
timer = setInterval(doMove,10);
//4.
oRollWrap.onmouseover = function(){clearTimeout(timer); timer=null;};
oRollWrap.onmouseout = function(){timer = setInterval(doMove,10);};
//5.
oRollLeft.onmouseover = function()
{
clearTimeout(timer);
moveLeft = true;
moveRight = false;
timer = setInterval(doMove,10);
}
//6.
oRollRight.onmouseover = function()
{
clearTimeout(timer);
moveLeft = false;
moveRight = true;
timer = setInterval(doMove,10);
}
//7.doMove
function doMove()
{
var l = oUl.offsetLeft;
//document.title = l;
if(moveLeft)
{
l = l - speed;
if(l<=-oUl.offsetWidth/2)
{
l = l + oUl.offsetWidth/2;
}
}
else
if(moveRight)
{
l = l + speed;
if(l>=0)
{
l = l - oUl.offsetWidth/2;
}
}
oUl.style.left = l + 'px';
}
}
</script>
</head>
<body>
<div id="rollDiv">
<img class="rollLeft" src="imgRoll/left.png" >
<img class="rollRight" src="imgRoll/right.png">
<div class="rollWrap" >
<ul>
<li><a href="#"><img src="imgRoll/o1.jpg"></a></li>
<li><a href="#"><img src="imgRoll/o2.jpg"></a></li>
<li><a href="#"><img src="imgRoll/o3.jpg"></a></li>
<li><a href="#"><img src="imgRoll/o4.jpg"></a></li>
<li><a href="#"><img src="imgRoll/o5.jpg"></a></li>
<li><a href="#"><img src="imgRoll/o6.jpg"></a></li>
<li><a href="#"><img src="imgRoll/o7.jpg"></a></li>
<li><a href="#"><img src="imgRoll/o8.jpg"></a></li>
</ul>
</div>
</div>
</body>
</html>
