照片无缝滚动

照片无缝滚动

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

<html>

<head>

    <title>无缝滚动图片</title>

    <script type=”text/javascript” src=”jquery-1.7.1.min.js”>

    </script></head>

<body>

    <!–以下是向左滚动代码–>

    <div id=”colee_left” style=”overflow:hidden;width:730px;”>

        <table cellpadding=”0″ cellspacing=”0″ border=”0″>

            <tr>

                <td id=”colee_left1″ valign=”top” align=”center”>

                    <table cellpadding=”2″ cellspacing=”0″ border=”0″>

                        <tr align=”center”>

                            <td style=”padding-right:15px;”><img src=”~/Content/themes/default/images/activecard.jpg” width=”165″ height=”125″><br /><div style=”text-align:center” title=”@typeName”>苹果电脑</div></td>

                            <td style=”padding-right:15px;”><img src=”~/Content/themes/default/images/activecard.jpg” width=”165″ height=”125″><br /><div style=”text-align:center” title=”@typeName”>苹果电脑</div></td>

                            <td style=”padding-right:15px;”><img src=”~/Content/themes/default/images/activecard.jpg” width=”165″ height=”125″><br /><div style=”text-align:center” title=”@typeName”>苹果电脑</div></td>

                            <td style=”padding-right:15px;”><img src=”~/Content/themes/default/images/activecard.jpg” width=”165″ height=”125″><br /><div style=”text-align:center” title=”@typeName”>苹果电脑</div></td>

                            <td style=”padding-right:15px;”><img src=”~/Content/themes/default/images/activecard.jpg” width=”165″ height=”125″><br /><div style=”text-align:center” title=”@typeName”>苹果电脑</div></td>

                        </tr>

                    </table>

                </td>

                <td id=”colee_left2″ valign=”top”></td>

            </tr>

        </table>

    </div>

    <script type=”text/javascript”>

        if ($(“#colee_left1 img”).length > 4) {

            clearInterval(MyMar3);

            //使用div时,请保证colee_left2与colee_left1是在同一行上.

            var speed = 30//速度数值越大速度越慢

            var colee_left2 = document.getElementById(“colee_left2”);

            var colee_left1 = document.getElementById(“colee_left1”);

            var colee_left = document.getElementById(“colee_left”);

            colee_left2.innerHTML = colee_left1.innerHTML

            function Marquee3() {

                if (colee_left2.offsetWidth – colee_left.scrollLeft <= 0)//offsetWidth 是对象的可见宽度

                    colee_left.scrollLeft -= colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度

                else {

                    colee_left.scrollLeft++

                }

            }

            var MyMar3 = setInterval(Marquee3, speed)

            colee_left.onmouseover = function () { clearInterval(MyMar3) }

            colee_left.onmouseout = function () { MyMar3 = setInterval(Marquee3, speed) }

        }

    </script>

    <!–结束离开滚动码–>

</body>

</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/116724.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号