jquery 实现图片无缝向左滚动

 

 <script type="text/javascript" src="_pub/Script/jquery.js"></script>

 <script type="text/javascript">

$(function () {
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 speed = 20;
var myMar = setInterval(Marquee, speed);

demo.mouseover(function () {
clearInterval(myMar);
});

demo.mouseout(function () {
myMar = setInterval(Marquee, speed);
});

})

</script>

 

<div id="demo" style="overflow:hidden;width:1280px;" >

<table style="border:1px;flex-align:center;" cellpadding="1" cellspacing="1">
<tr>
<td id="demo1" valign="top" bgcolor="ffffff">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><img src="skin/images2/1.png" width="265" height="163" alt="图"/></td>   这几张图的总宽度大于1280px;才能在循环2次之后继续滚动
<td><img src="skin/images2/2.png" width="265" height="163" alt="图"/></td>
<td><img src="skin/images2/3.png" width="265" height="163" alt="图"/></td>
<td><img src="skin/images2/4.png" width="265" height="163" alt="图"/></td>
<td><img src="skin/images2/5.png" width="265" height="163" alt="图"/></td>

</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>

</div>

转载于:https://www.cnblogs.com/miraclesakura/p/3896739.html