图片向上、向下、向左、向右不间断无缝滚动.

　　图片向下滚动：

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

            <div id="colee1">

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

            </div>

            <div id="colee2">

            </div>

        </div>

        <script type="text/javascript">

            var speed = ;

            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 <= ) {

                    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>

　　图片向下滚动

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

            <div id="colee_bottom1">

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                <p>

                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>

            </div>

            <div id="colee_bottom2">

            </div>

        </div>

        <script>

            var speed =

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

                    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>

　　图片向左滚动

<div id="colee_left" style="overflow: hidden; width: 500px;">

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

                <tr>

                    <td id="colee_left1" valign="top" align="center">

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

                            <tr align="center">

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                            </tr>

                        </table>

                    </td>

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

                    </td>

                </tr>

            </table>

        </div>

        <script>

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

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

            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 <= )//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>

　　图片向右滚动

<!--下面是向右滚动代码-->

        <div id="colee_right" style="overflow: hidden; width: 500px;">

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

                <tr>

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

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

                            <tr align="center">

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                                <td>

                                    <p>

                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>

                                </td>

                            </tr>

                        </table>

                    </td>

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

                    </td>

                </tr>

            </table>

        </div>

        <script>

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

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

                    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>

JavaScript- 图片无缝滚动的更多相关文章

  1. Javascript图片无缝滚动

    http://www.cnblogs.com/shouce/p/5068787.html

  2. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  3. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  4. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  8. Javascript实现图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

    <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...

  10. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

随机推荐

  1. EWS小记

    前段时间和同事完成了一个Exchange 2010 OWA的改造版,他狠狠的把网易邮箱抄了一把,而我则狠狠的被EWS坑了一把.今天打开项目粗略看了一下,发现很多东西都有点记不起来了,思细极恐,决定还是 ...

  2. Java连接MySQl数据库实现代码

    1. 获取数据库连接和查询代码 package connectionmysql; import java.sql.Connection; import java.sql.DriverManager; ...

  3. 1920-Jangbi的Rush

    描述 最后一届的OSL决赛由神族的Jangbi对阵人族Fantasy.Jangbi5BG爆叉叉准备一波rush,但是范特西早有防备,在地图上埋下了许多地雷.但是Jangbi显然不是毕姥爷那样的无脑平A ...

  4. IB_DESIGNABLE的使用

    创建LHQTextField 继承自: UITextField 将我自定义的textField在面板中进行关联 此时,在设置刚来添加的属性的值的时候,就会立马出效果

  5. 安装Ubuntu服务器

    安装edX首先需要一台linux或Mac系统的电脑/服务器. 这里以常见的Ubuntu作为服务器系统. Ubuntu的官方网站为http://www.ubuntu.com,中文网站为http://ht ...

  6. Application.EnableVisualStyles();

    Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false);  Application ...

  7. SQL Server 2008R2 数据库出现“可疑”导致无法访问

    日常对Sql Server 2005关系数据库进行操作时,有时对数据库(如:Sharepoint网站配置数据库名Sharepoint_Config)进行些不正常操作如数据库在读写时而无故停止数据库,从 ...

  8. 【HDOJ】1204 糖果大战

    题目本身不难.类似于dp.f(i)表示手中现有i颗糖果赢的概率,则下一局赢的概率是p(1-q),下一局输的概率是q(1-p),下一句平手的概率是1-p(1-q)-q(1-p),平手包括两人均答对或答错 ...

  9. WCF中修改接口或步骤名称而不影响客户端程序

    WCF中修改接口或方法名称而不影响客户端程序 本篇接着"从Web Service和Remoting Service引出WCF服务"中有关WCF的部分. 运行宿主应用程序. 运行We ...

  10. 教你如何通过ICCID找回丢失的的iPhone

    22日晚买了FACETIME,在某宝上买的.价格不贵,可以查到偷手机的人注册FT的号码,还可以查询手机被刷机和被维修的日期(这个很关键) 27日手机被刷机,遂买了某宝查询ICCID的服务,找到一串IC ...