<div id="marquee_demo"
style="overflow: hidden; width: 1000px; height: 108; padding: 0px;">
<table cellspacing="0" cellpadding="3" align="center" border="0">
<tr>
<td id="marquee_product1" valign="top">
<table width="100%" height="100" border="0" cellpadding="2"
cellspacing="0">
<tr>
<c:forEach items="${showProducts}" var="showProduct">
<td><a
href="product.do?pid=${showProduct.id}&cid=${showProduct.category}"><img
src="${showProduct.img }" width="133" height="100" /></a></td>
</c:forEach>
</tr>
</table>
</td>
<td id="marquee_product2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed = 30;
marquee_product2.innerHTML = marquee_product1.innerHTML;
function Marquee() {
if (marquee_demo.scrollLeft >= marquee_product1.scrollWidth) {
marquee_demo.scrollLeft = 0;
} else {
marquee_demo.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
marquee_demo.onmouseover = function() {
clearInterval(MyMar);
}
marquee_demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed);
}
</script>
图片滚动效果
最新推荐文章于 2022-02-25 19:38:17 发布