Question

帮忙详细解读一下这段js实现图片滚动的代码含义 这段代码的思路和网上别的图片滚动的思路不一样呢 看不懂

<script>
window.onload=function()
{ var odiv2=document.getElementById('div2');
var ali=odiv2.getElementsByTagName('li');
var aspeed=-5;
var timer=null;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
odiv2.onmouseover=function()
{clearInterval(timer);};
function a(){
timer=setInterval(function()
{ odiv2.style.left=odiv2.offsetLeft+aspeed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{ odiv2.style.left='0px'; } },30);};
odiv2.onmouseout=a;
a();
}
</script>

body内的代码为

<div id='div1'>
<div id='div2'>

<li><a href=""><img src="images/9.jpg" /></a></li>
<li><a href=""><img src="images/10.jpg" /></a></li>
<li><a href=""><img src="images/11.jpg" /></a></li>
</div>
</div>

Answer 1

odiv2.innerHTML+=odiv2.innerHTML;
意思是
<div id='div2'>
<li><a href=""><img src="images/9.jpg" /></a></li>
<li><a href=""><img src="images/10.jpg" /></a></li>
<li><a href=""><img src="images/11.jpg" /></a></li>
<li><a href=""><img src="images/9.jpg" /></a></li>
<li><a href=""><img src="images/10.jpg" /></a></li>
<li><a href=""><img src="images/11.jpg" /></a></li></div>
----------------------------------------------
function a(){
timer=setInterval(function()
{ odiv2.style.left=odiv2.offsetLeft+aspeed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{ odiv2.style.left='0px'; } },30);}; //每30s，执行一次setInterval()
----------------------------------------------
odiv2.onmouseover=function(){clearInterval(timer);};//当鼠标移到div2时取消由 setInterval() 设置的 timeout
----------------------------------------------
odiv2.onmouseout=a; //当鼠标离开div2时，执行方法a，即 setInterval()

再具体的就是偏移部分了