<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);
};
}我现在做了两个滚动，在谷歌和火狐浏览器刷新能够上下对齐，但是在IE图片对不齐，一刷新下面图片就向右跳。不知道要怎么修改。如果只是一个滚动要怎么做成两行一起滚动？
添加回答
举报
0/150
提交
取消