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

　　图片向下滚动：

<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. c++学习之旅-Cygwin+Eclipse ide for c++

    一,cygwin下载完毕后配置系统环境片两path指向cygwin/bin 二,eclipse设置 2.1 设置工作目录的cygwin映射 cygwin/d ->d:\ 2.2设置编译 下面新建 ...

  2. Android EditText的常用技巧

    1.       设定 EditText 的滚动条.对齐方式.行数.和提示 (hint) 及其颜色 在布局文件,比如 main.xml 中,增加 < EditText android:id =  ...

  3. SLF4J user manual

    http://www.slf4j.org/manual.html The Simple Logging Facade for Java (SLF4J) serves as a simple facad ...

  4. C#程序中访问配置文件

    在C#编程中,有时候会用到配置文件,那么该如何在程序中获取或修改配置文件中的相关数据呢?下面采用一个简单的C#控制台程序来说明. 新建一个C#控制台程序,打开“解决方案资源管理器”,如下图: 可以看到 ...

  5. ubunt下的MinimalCD

    ubuntu有MinimalCD,水平高的衍生版制作者基于MinimalCD安装并编译,定制出独特风格的ubuntu衍生版,如 crunchbang.水平不高的个人用户可以从Alternate(文字安 ...

  6. VM Depot 分布式计算框架主题应用精选

     发布于 2014-12-24 作者 陈 忠岳 在前几期为各位介绍了大数据应用主题以及开发运营主题的各类镜像后,这次我们精选了 VM Depot 站点中分布式计算相关主题的虚拟机镜像和大家一起分享 ...

  7. addChildViewController 与 addSubview

    在viewcontrollerA中, 如果想把controllerB.view添加进来, 可以用 addSubview, 但如果controllerB中有个事件, 使用到 self.navigatio ...

  8. Ruby require 路径问题

    require 负责引用一个外部文件,可以省略".rb"字样. 如: require 'foo.bar' 等价于 require 'foo' 在Ruby中,同一目录下的文件, 如 ...

  9. Mathtype(对齐设置)

    选左对齐 可以编辑->插入符号->空格符

  10. JSP-讲解(生成java类、静态导入与动态导入)

    一.JSP技术简介 JSP是Java Server Page的缩写,它是Servlet的扩展,它的作用是简化网站的创建和维护. JSP是HTML代码与Java代码的混合体. JSP文件通常以JSP或J ...