图片循环滚动两次停止，请大家帮忙，谢谢！
图片循环滚动两次停止，网上找了很多帖子，也未解决，非常着急，请帮忙，谢谢！
<table border="0" align="center" cellpadding="0" cellspacing="0" width="751" height="148">
<tr>
<td style=" width:1px"></td>
<td style="background-image:url(images/u3.jpg);width:751px; height:140px"; align="center">
<table>
<tr>
<td style="width:20px"></td>
<td>
<div id="demo" style="OVERFLOW: hidden; WIDTH: 98%; COLOR: #ffffff">
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="demo1" valign="center"><table height="142" border="0" cellpadding="0" cellspacing="0" width="98%">
<tr>
<td style="width:171px"></td>
<td><img src="website/UploadFile/tu1.jpg" border="0" alt=""/></td>
<td width="30px"> </td>
<td><img src="website/UploadFile/tu2.jpg" border="0"alt=""/></td>
<td width="30px"> </td>
<td><img src="website/UploadFile/tu3.jpg" border="0" alt=""/></td>
<td width="30px"> </td>
<td><img src="website/UploadFile/tu5.jpg" border="0" alt=""/></td>
<td width="30px"> </td>
<td><img src="website/UploadFile/tu6.jpg" border="0" alt=""/></td>
<td width="30px"> </td>
</tr>
</table></td>
<td id="demo2" vAlign=top> </td></tr></tbody></table> </div>
<!--</marquee>-->
<script type="text/javascript">
var speed3=25
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
[解决办法]
<!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> <title>pic player</title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script> </head> <style type="text/css"> img{border:0;} </style> <body> <div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;"> there is a pic-player </div> <script> var p = $('#picplayer'); var pics1 = [{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:5000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:4000},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:6000}]; initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]); // // function initPicPlayer(pics,w,h) { //选中的图片 var selectedItem; //选中的按钮 var selectedBtn; //自动播放的id var playID; //选中图片的索引 var selectedIndex; //容器 var p = $('#picplayer'); p.text(''); p.append('<div id="piccontent"></div>'); var c = $('#piccontent'); for(var i=0;i<pics.length;i++) { //添加图片到容器中 c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>'); } //按钮容器，绝对定位在右下角 p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div>'); // var btnHolder = $('#picbtnHolder'); btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>'); var btns = $('#picbtns'); // for(var i=0;i<pics.length;i++) { //增加图片对应的按钮 btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> '); $('#picbtn'+i).data('index',i); $('#picbtn'+i).click( function(event) { if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src')) { return; } setSelectedItem($(this).data('index')); } ); } btns.append(' '); /// setSelectedItem(0); //显示指定的图片index function setSelectedItem(index) { selectedIndex = index; clearInterval(playID); //alert(index); if(selectedItem)selectedItem.fadeOut('fast'); selectedItem = $('#picitem'+index); selectedItem.fadeIn('slow'); // if(selectedBtn) { selectedBtn.css('backgroundColor','#eee'); selectedBtn.css('color','#000'); } selectedBtn = $('#picbtn'+index); selectedBtn.css('backgroundColor','#000'); selectedBtn.css('color','#fff'); //自动播放 playID = setInterval(function() { var index = selectedIndex+1; if(index > pics.length-1)index=0; setSelectedItem(index); },pics[index].time); } } </script> </body> </html>
[解决办法]
<div id="dmo_1" style="height:140px; width:660px;overflow:hidden;"> <ul id="dmo_1_u" style="margin-left:-2px;padding-top:5px;"> <li style="width:130px; height:120px; overflow:hidden; top:0px; left:0px;float:left; margin-left:2px; margin-right:2px;background-color:#F4F7FC"><table width="100%" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center"> <a href="/zjra/2011429/n7548114.html" target="_blank" title="红茶沟公园 "><img src="/files/shortpictures/2011-4/201142933319.jpg" width="120" height="90" border="0" style="padding:2px;border:1px solid #CCCCCC" /> </a> </td> </tr> <tr> <td align="center"><a href="/zjra/2011429/n7548114.html" target="_blank" title="红茶沟公园 ">红茶沟公园 </a></td> </tr></table></li><li style="width:130px; height:120px; overflow:hidden; top:0px; left:0px;float:left; margin-left:2px; margin-right:2px;background-color:#F4F7FC"><table width="100%" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center"> <a href="/zjra/2011429/n1104113.html" target="_blank" title="大良石门景区"><img src="/files/shortpictures/2011-4/201142926772.jpg" width="120" height="90" border="0" style="padding:2px;border:1px solid #CCCCCC" /> </a> </td> </tr> <tr> <td align="center"><a href="/zjra/2011429/n1104113.html" target="_blank" title="大良石门景区">大良石门景区</a></td> </tr></table></li><li style="width:130px; height:120px; overflow:hidden; top:0px; left:0px;float:left; margin-left:2px; margin-right:2px;background-color:#F4F7FC"><table width="100%" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center"> <a href="/zjra/2011429/n2703112.html" target="_blank" title="长安骑楼街 "><img src="/files/shortpictures/2011-4/201142980786.jpg" width="120" height="90" border="0" style="padding:2px;border:1px solid #CCCCCC" /> </a> </td> </tr> <tr> <td align="center"><a href="/zjra/2011429/n2703112.html" target="_blank" title="长安骑楼街 ">长安骑楼街 </a></td> </tr></table></li><li style="width:130px; height:120px; overflow:hidden; top:0px; left:0px;float:left; margin-left:2px; margin-right:2px;background-color:#F4F7FC"><table width="100%" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center"> <a href="/zjra/2011429/n8764111.html" target="_blank" title="芒蒿祈福"><img src="/files/shortpictures/2011-4/201142944566.jpg" width="120" height="90" border="0" style="padding:2px;border:1px solid #CCCCCC" /> </a> </td> </tr> <tr> <td align="center"><a href="/zjra/2011429/n8764111.html" target="_blank" title="芒蒿祈福">芒蒿祈福</a></td> </tr></table></li><li style="width:130px; height:120px; overflow:hidden; top:0px; left:0px;float:left; margin-left:2px; margin-right:2px;background-color:#F4F7FC"><table width="100%" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center"> <a href="/zjra/2011429/n4551110.html" target="_blank" title="融 江"><img src="/files/shortpictures/2011-4/201142930682.jpg" width="120" height="90" border="0" style="padding:2px;border:1px solid #CCCCCC" /> </a> </td> </tr> <tr> <td align="center"><a href="/zjra/2011429/n4551110.html" target="_blank" title="融 江">融 江</a></td> </tr></table></li><li style="width:130px; height:120px; overflow:hidden; top:0px; left:0px;float:left; margin-left:2px; margin-right:2px;background-color:#F4F7FC"><table width="100%" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center"> <a href="/zjra/2011429/n6910109.html" target="_blank" title="宜居县城 "><img src="/files/shortpictures/2011-4/201142921080.jpg" width="120" height="90" border="0" style="padding:2px;border:1px solid #CCCCCC" /> </a> </td> </tr> <tr> <td align="center"><a href="/zjra/2011429/n6910109.html" target="_blank" title="宜居县城 ">宜居县城 </a></td> </tr></table></li><li style="width:130px; height:120px; overflow:hidden; top:0px; left:0px;float:left; margin-left:2px; margin-right:2px;background-color:#F4F7FC"><table width="100%" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center"> <a href="/zjra/2011429/n6393108.html" target="_blank" title="特色小吃--滤粉"><img src="/files/shortpictures/2011-4/201142941519.jpg" width="120" height="90" border="0" style="padding:2px;border:1px solid #CCCCCC" /> </a> </td> </tr> <tr> <td align="center"><a href="/zjra/2011429/n6393108.html" target="_blank" title="特色小吃--滤粉">特色小吃--滤粉</a></td> </tr></table></li> </ul> </div><!--图片滚动--><script> var speed=30 var MyMar; var n=0; var len=document.getElementById("dmo_1_u").getElementsByTagName("li").length; if(len>=5) { document.getElementById("dmo_1_u").innerHTML=document.getElementById("dmo_1_u").innerHTML + document.getElementById("dmo_1_u").innerHTML; [color=#FF0000]document.getElementById("dmo_1_u").style.width=(135 * len * 2) + "px";[/color] MyMar=setInterval(Marquee,speed) } function Marquee(){ if(document.getElementById("dmo_1").scrollLeft>=(document.getElementById("dmo_1").scrollWidth/2 -10)) { document.getElementById("dmo_1").scrollLeft=0; } else{ document.getElementById("dmo_1").scrollLeft=document.getElementById("dmo_1").scrollLeft + 1; } } document.getElementById("dmo_1").onmouseover=function(){ clearInterval(MyMar); } document.getElementById("dmo_1").onmouseout=function(){ MyMar=setInterval(Marquee,speed); } </script>
[解决办法]
document.getElementById("dmo_1_u").style.width=(135 * len * 2) + "px";
这一句是关键