????<div?class="mo_product"?id="mo_product">
????<div?id="demoproduct">
??????<div?id="inproduct">
????????<div?id="product"?>
??????????<ul>
????????????<li><a?href="#"><img?src="images/mr_case_01.jpg"?border="0"?/></a></li>
????????????<li><a?href="#"><img?src="images/mr_case_02.jpg"?border="0"?/></a></li>
????????????<li><a?href="#"><img?src="images/mr_case_02.jpg"?border="0"?/></a></li>
????????????<li><a?href="#"><img?src="images/mr_case_03.jpg"?border="0"?/></a></li>
????????????<li><a?href="#"><img?src="images/mr_case_05.jpg"?border="0"?/></a></li>
????????</ul>
????</div>
????<div?id="product2"></div>
</div>
</div>
????<div?id="demoproduct2">
??????<div?id="inproduct2">
????????<div?id="product12"?>
??????????<ul>
????????????<li><a?href="#"><img?src="images/mr_case_01.jpg"?border="0"?/></a></li>
????????????<li><a?href="#"><img?src="images/mr_case_02.jpg"?border="0"?/></a></li>
????????????<li><a?href="#"><img?src="images/mr_case_02.jpg"?border="0"?/></a></li>
????????????<li><a?href="#"><img?src="images/mr_case_03.jpg"?border="0"?/></a></li>
????????????<li><a?href="#"><img?src="images/mr_case_05.jpg"?border="0"?/></a></li>
??????????</ul>
????????</div>
????<div?id="product22"></div>
</div>
</div>
</div>.mo_product{?width:1224px;?padding:0?20px;}
#demoproduct,#demoproduct2?{margin:?0?auto;?width:?1224px;?overflow:?hidden;}
#inproduct?,#inproduct2?{?float:?left;?width:?800%;?height:147px;}
#inproduct?li?,#inproduct2?li{?float:?left;?text-align:?center;?list-style:?none;?margin-left:30px;}
#inproduct?li?a?,#inproduct2?li?a{?display:?block;?width:202px;?height:?123px;}
#inproduct?li?a?img,#inproduct2?li?a?img{?border:#b5b5b5?solid?3px;?margin-top:18px;}
#product?,#product12{?float:?left;}?
#product2?,#product22?{?float:?left;}window.onload?=?function(){
var?speed=40;
var?tabas?=?document.getElementById("mo_product");
var?tab=document.getElementById("demoproduct");
var?tab1=document.getElementById("product");
var?tab2=document.getElementById("product2");
tab2.innerHTML=tab1.innerHTML;
function?Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var?speed2=40;
var?tab2=document.getElementById("demoproduct2");
var?tab12=document.getElementById("product12");
var?tab22=document.getElementById("product22");
tab22.innerHTML=tab12.innerHTML;
function?Marquee2(){
if(tab22.offsetWidth-tab2.scrollLeft<=0)
tab2.scrollLeft-=tab12.offsetWidth
else{
tab2.scrollLeft++;
}
}
var?MyMar=setInterval(Marquee,40);
var?MyMar2=setInterval(Marquee2,40);
tabas.onmouseover=function()?{
??clearInterval(MyMar2);
?clearInterval(MyMar);
?};
tabas.onmouseout=function()?{
?MyMar2=setInterval(Marquee2,40);
?MyMar=setInterval(Marquee,40);
?};
}我現(xiàn)在做了兩個滾動，在谷歌和火狐瀏覽器刷新能夠上下對齊，但是在IE圖片對不齊，一刷新下面圖片就向右跳。不知道要怎么修改。如果只是一個滾動要怎么做成兩行一起滾動？
兩行圖片循環(huán)向左滾動
SkullX
2015-04-19 12:29:51