html代码
<div class="demo" id="demo" style="overflow:hidden; 660px; height:185px;" onmousemove="fnMouseOver();" onmouseout="fnMouseOut()"> <table border="0" align="center" cellpadding="1" cellspacing="1" cellspace="0"> <tbody><tr> <td id="demo1" valign="top"><!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ --> <table width="1270" border="0" cellspacing="0" cellpadding="0"> <tbody><tr align="center"> <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> </tr> <tr> <td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td> </tr> </tbody></table></td> <td id="demo2" valign="top"><!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ --> <table width="1270" border="0" cellspacing="0" cellpadding="0"> <tbody><tr align="center"> <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td> <td width="3" height="157"></td> </tr> <tr> <td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td> <td width="3" height="30" align="center"></td> <td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td> </tr> </tbody></table></td> </tr> </tbody></table> </div>
js代码
<script type="text/javascript">
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){
if(demo.scrollLeft()>=demo1.width())
demo.scrollLeft(0);
else{
demo.scrollLeft(demo.scrollLeft()+1);
}
}
var MyMar=setInterval(Marquee,speed)
function fnMouseOver() {
clearInterval(MyMar);
}
function fnMouseOut() {
MyMar=setInterval(Marquee,speed);
}
function fnPre() {
for(var i=0;i<20;i++){
if(demo.scrollLeft()>=demo1.width())
demo.scrollLeft(0);
else{
demo.scrollLeft(demo.scrollLeft()+5);
}
}
}
function fnBack() {
//alert(demo1.width());
for(var i=0;i<20;i++){
if(demo.scrollLeft()<=0)
demo.scrollLeft(demo1.width());
else{
demo.scrollLeft(demo.scrollLeft()-5);
}
}
}
</script>