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

　　图片向下滚动：

<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. 计算器(console version)

    题目描述 请用python编写一个计算器的控制台程序,支持加减乘除.乘方.括号.小数点,运算符优先级为括号>乘方>乘除>加减,同级别运算按照从左向右的顺序计算. 输入描述 数字包括& ...

  2. 从内部剖析C# 集合之--Dictionary

    Dictionary和hashtable用法有点相似,他们都是基于键值对的数据集合,但实际上他们内部的实现原理有很大的差异, 先简要概述一下他们主要的区别,稍后在分析Dictionary内部实现的大概 ...

  3. Sql狗血的Bit类型赋值与取值

    Bit 数据类型在 SQL Server 数据库中以存储 1.0 进行存储. 往数据库中添加,修改 bit 类型的字段时,只能用 0 或者 1. 关于修改 Bit 类型的字段 1.若使用 SQL 语句 ...

  4. POJ 1151 Atlantis（离散化）

    点我看题目 题意 : 就是给你n个矩形的最左下角和最右上角的点的坐标,然后将这n个矩形的面积求出来. 思路 : 离散化求矩形面积并.离散化具体介绍.将横纵坐标离散开来分别存,然后排序,也可以按照黑书上 ...

  5. C语言中随机数的生成

    刚好在找这方面的资料,看到了一片不错的,就全文转过来了,省的我以后再找找不到. 在C语言中,可以通过rand函数得到一个“伪随机数”.这个数是一个整数,其值大于等于0且小于等于RAND_MAX.ran ...

  6. SQL SERVER查看当前连接情况

    使用超级管理员账户登录,并执行以下命令: SELECT * FROM [Master].[dbo].[SYSPROCESSES] WHERE [DBID] IN ( SELECT [DBID] FRO ...

  7. SPRING IN ACTION 第4版笔记-第七章Advanced Spring MVC-002- 在xml中引用Java配置文件，声明DispatcherServlet、ContextLoaderListener

    一.所有声明都用xml 1. <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  8. xml解析代码示例

    List<Entry> list = new ArrayList<>(); Entry entry = null; try { int eventType = response ...

  9. Android 在AlertDialog里添加布局控件

    android里很多时候需要在弹出的AlertDialog里有自己的控件,填写信息,比如弹出一个登陆对话框 那么首先你就要创建这么一个布局的inputphonenum.xml文件了 <?xml ...

  10. SSH框架中配置Hibernate使用proxool连接池

    一.导入proxool.jar包 案例用的是proxool-0.8.3.jar,一般通过MyEclipse配置的SSH都会包含这个jar,如果没有,就去网上搜下下载导入就好了. 二.新建Proxool ...