图片滚动播放--liu(待续)

<!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);
}