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

　　图片向下滚动：

<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. Hadoop集群（第5期）_Hadoop安装配置

    1.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台.以Hadoop分布式文件系统(HDFS,Hadoop Distributed Filesystem)和Map ...

  2. UVA 11739 Giving Candies

    求最大的公共前缀: 用后缀数组做: 其实暴力也可以过: #include<cstdio> #include<cstring> #include<algorithm> ...

  3. MongoDB实战指南(一)：大数据与云计算

    1.1 什么大数据 具体来说,大数据技术涉及到数据的创造,存储,获取和分析,大数据的主要特点有下面几个: 数据量大.一个典型的PC机载2000年前后其存储空间可能有10GB,今天facebook一天增 ...

  4. JNI|在子线程中获得JNIEnv|AttachCurrentThread

    A JNI interface pointer (JNIEnv*) is passed as an argument for each native function mapped to a Java ...

  5. java中的CAS

    转自:http://www.blogjava.net/mstar/archive/2013/04/24/398351.html Atomic 从JDK5开始, java.util.concurrent ...

  6. SPRING IN ACTION 第4版笔记-第六章RENDERING WEB VIEWS-003- SPRING的GENERAL TAG LIBRARY简介及用<s:message>和ReloadableResourceBundleMessageSource实现国际化

    一. SPRING支持的GENERAL TAG LIBRARY 1. 二.用<s:message>和ReloadableResourceBundleMessageSource实现国际化 1 ...

  7. 电脑是如何识别USB 3.0 U盘的

    USB 3.0电缆如图1所示. 图1 USB 3.0的接口比USB 2.0接口多了5根线,这5根线分别是Shield.SSRX+/-和SSTX+/-,即是屏蔽地.超速发送差分对和接受差分对. 因此一个 ...

  8. JAVA抽象类与接口

    在Java语言中, abstract class 和interface 是支持抽象类定 义的两种机制.正是由于这两种机制的存在,才赋予了Java强大的 面向对象能力.abstract class和in ...

  9. [译]GotW #6b Const-Correctness, Part 2

         const和mutable对于书写安全代码来说是个很有利的工具,坚持使用它们. Problem Guru Question 在下面代码中,在只要合适的情况下,对const进行增加和删除(包括 ...

  10. RESTFul API 一些文章

    http://www.ibm.com/developerworks/cn/web/1103_chenyan_restapi/index.html