<!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; text-align:center; font-size:12px;} #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>
运行下列代码，会出现浏览器崩溃现象，为何呢？
|
1
2
3
4
5
6
7
8
9 |
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);} |
图片滚动播放--liu(待续),布布扣,bubuko.com
原文：http://www.cnblogs.com/positive/p/3653621.html