<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片循环滚动</title> <style type="text/css"> *{ margin:0; padding:0;} ul,li{ margin:0; padding:0;} ul li{ list-style-type:none;} .flashkv{ position:relative; width:1000px;border:1px solid #e0e0e0; margin:50px auto;} #demo{ width:960px; overflow:hidden; margin:0 auto; font-size:0;} #demo1{ white-space:nowrap; } #demo1 li{ width:240px; display:inline-block; *display:inline; zoom:1; text-align:center; font-size:12px;} //ie6 ie7不支持display:inline-block;所以要用display:inline;zoom:1解决 #demo1 li img{ border:1px solid #ccc;} #demo1 li span{ display:block; } .prev{ position:absolute; left:0; top:40%; margin-top:-24px;} .next{ position:absolute; right:0; top:40%; margin-top:-24px;} .prev a{ background: url("http://img.mymhotel.com/front/newindex01a_119.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);display: block;height: 48px;text-indent: -9999px;width: 21px;} .next a{ background: url("http://img.mymhotel.com/front/newindex01a_117.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);display: block;height: 48px;text-indent: -9999px;width: 21px;} </style> </head> <body> <div class="flashkv"> <div id='demo'> <ul id='demo1'> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex01a_107.jpg"></a><span>三亚湾红树林度假世界</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex01a_110.jpg"></a><span>亚龙湾红树林度假酒店</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex01a_112.jpg"></a><span>海棠湾红树林度假酒店</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex01a_114.jpg"></a><span>青岛红树林度假世界</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex01a_115.jpg"></a><span>广州从化红树林度假世界</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex01a_116.jpg"></a><span>都江堰红树林度假世界</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex01a_118.jpg"></a><span>大理红树林度假世界</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex01a_120.jpg"></a><span>丽江红树林度假世界</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex_hz.jpg"></a><span>杭州红树林度假酒店</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex_ss.jpg"></a><span>嵊泗列岛红树林度假世界</span></li> <li><a href="#"><img width="217" height="116" src="http://img.mymhotel.com/front/newindex_ls.jpg"></a><span>拉萨红树林度假世界</span></li> </ul> </div> <div class="prev"><a href="#"></a></div> <div class="next"><a href="#"></a></div> </div> <script type="text/javascript"> var demo=document.getElementById('demo'); var demo1=document.getElementById('demo1'); var t=demo.scrollWidth; demo1.innerHTML+=demo1.innerHTML; var picWidth=demo1.getElementsByTagName('li')[0].offsetWidth; autoScroll(); function doMarquee(){ demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+picWidth:t-demo.offsetWidth; console.log(demo.scrollLeft); } function autoScroll(){ sc=setInterval(doMarquee,3000); } </script> </body> </html>
运行下列代码，会出现浏览器崩溃现象，为何呢？
function doMarquee(){
var i=0;
while(i<picWidth){
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth;
}
}
function autoScroll(){
sc=setInterval(doMarquee,3000);
}