常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全

于 2019-06-17 16:33:40 发布
阅读量7.5k 收藏 16
点赞数 2
分类专栏： Html+Javascript 
innerHTML:    设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth: 获取对象的滚动宽度

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:   获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:    获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

以下包含四种方向的滚动代码，粗体部分需要自行修改，可修改成更复杂的代码，如图文混排、加边框、限制图片大小等。

增大width时，应该相应增加一些图片（应该是使所有图片组成的总宽度大于设定的width），即使是重复的，否则会在滚动一会儿后停下来，图片不宜太大，否则在IE下滚动缓慢!

<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</title>
</head>

<body>

<div id="colee" style="overflow: hidden; height: 253px; width: 410px;">

    <div id="colee1">

        <p>
            <img src="images/000.jpg"/>
        </p>

        <p>
            <img src="images/111.jpg"/>

        </p>

        <p>
            <img src="images/222.jpg"/>

        </p>

        <p>
            <img src="images/333.jpg"/>
        </p>

        <p>
            <img src="images/GK.png"/>

        </p>

        <p>
            <img src="images/GK.png"/>
        </p>

    </div>

    <div id="colee2"></div>

</div>

<script>

    var speed = 30;

    var colee2 = document.getElementById("colee2");

    var colee1 = document.getElementById("colee1");

    var colee = document.getElementById("colee");

    colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2

    function Marquee1() {

//当滚动至colee1与colee2交界时

        if (colee2.offsetTop - colee.scrollTop <= 0) {

            colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端

        } else {

            colee.scrollTop++;

        }

    }

    var MyMar1 = setInterval(Marquee1, speed); //设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

    colee.onmouseover = function() { clearInterval(MyMar1) };

//鼠标移开时重设定时器

    colee.onmouseout = function() { MyMar1 = setInterval(Marquee1, speed) };

</script>

<!--向上滚动代码结束-->

<br>

<!--下面是向下滚动代码-->
<div id="colee_bottom" style="overflow: hidden; height: 253px; width: 410px;">

    <div id="colee_bottom1">

        <p>
            <img src="images/000.jpg"/>
        </p>

        <p>
            <img src="images/111.jpg"/>

        </p>

        <p>
            <img src="images/222.jpg"/>

        </p>

        <p>
            <img src="images/333.jpg"/>
        </p>

        <p>
            <img src="images/GK.png"/>

        </p>

        <p>
            <img src="images/GK.png"/>
        </p>

    </div>

    <div id="colee_bottom2"></div>

</div>

<script>

    var speed = 30;

    var colee_bottom2 = document.getElementById("colee_bottom2");

    var colee_bottom1 = document.getElementById("colee_bottom1");

    var colee_bottom = document.getElementById("colee_bottom");

    colee_bottom2.innerHTML = colee_bottom1.innerHTML;

    colee_bottom.scrollTop = colee_bottom.scrollHeight;

    function Marquee2() {

        if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0)
            colee_bottom.scrollTop += colee_bottom2.offsetHeight;
        else {

            colee_bottom.scrollTop--;

        }

    }

    var MyMar2 = setInterval(Marquee2, speed);

    colee_bottom.onmouseover = function() { clearInterval(MyMar2) };

    colee_bottom.onmouseout = function() { MyMar2 = setInterval(Marquee2, speed) };

</script>

<!--向下滚动代码结束-->

<br>

<!--下面是向左滚动代码-->
<div id="colee_left" style="overflow: hidden; width: 500px;">

    <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>
                            <p>
                                <img src="images/000.jpg"/>
                            </p>


                        </td>

                        <td>
                            <p>
                                <img src="images/111.jpg"/>

                            </p>


                        </td>

                        <td>
                            <p>
                                <img src="images/222.jpg"/>

                            </p>


                        </td>

                        <td>
                            <p>
                                <img src="images/333.jpg"/>
                            </p>


                        </td>

                        <td>
                            <p>
                                <img src="images/GK.png"/>

                            </p>

                        </td>

                        <td>
                            <p>
                                <img src="images/GK.png"/>
                            </p>
                        </td>

                    </tr>

                </table>

            </td>

            <td id="colee_left2" valign="top"></td>

        </tr>

    </table>

</div>

<script>

    //使用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>

<!--向左滚动代码结束-->

<br>

<!--下面是向右滚动代码-->
<div id="colee_right" style="overflow: hidden; width: 500px;">

    <table cellpadding="0" cellspacing="0" border="0">

        <tr>
            <td id="colee_right1" valign="top" align="center">

                <table cellpadding="2" cellspacing="0" border="0">

                    <tr align="center">

                        <td>
                            <p>
                                <img src="images/000.jpg"/>
                            </p>
                        </td>

                        <td>
                            <p>
                                <img src="images/111.jpg"/>
                            </p>
                        </td>

                        <td>
                            <p>
                                <img src="images/222.jpg"/>

                            </p>

                        </td>

                        <td>
                            <p>
                                <img src="images/333.jpg"/>
                            </p>


                        </td>

                        <td>
                            <p>
                                <img src="images/GK.png"/>

                            </p>

                        </td>

                        <td>
                            <p>
                                <img src="images/GK.png"/>
                            </p>
                        </td>

                    </tr>

                </table>

            </td>

            <td id="colee_right2" valign="top"></td>

        </tr>

    </table>

</div>

<script>

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

    var colee_right2 = document.getElementById("colee_right2");

    var colee_right1 = document.getElementById("colee_right1");

    var colee_right = document.getElementById("colee_right");

    colee_right2.innerHTML = colee_right1.innerHTML;

    function Marquee4() {
        if (colee_right.scrollLeft <= 0)
            colee_right.scrollLeft += colee_right2.offsetWidth;
        else {
            colee_right.scrollLeft--;
        }

    }

    var MyMar4 = setInterval(Marquee4, speed);

    colee_right.onmouseover = function() { clearInterval(MyMar4) };

    colee_right.onmouseout = function() { MyMar4 = setInterval(Marquee4, speed) };

</script>

<!--向右滚动代码结束-->

</body>

</html>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值