图片滚动效果

来源：互联网发布：卡盟排行榜php源码编辑：程序博客网时间：2024/05/22 05:16

<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>