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

　　图片向下滚动：

<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. nodejs 第一次使用

    在win7下安装与使用 1 nodejs官网下载,安装  https://nodejs.org/ 2 下载最新的 npm,在E:\nodejs\中解压  http://nodejs.org/dist/ ...

  2. [转载]C# 中对html 标签过滤

    private string FilterHTML(string html) { System.Text.RegularExpressions.Regex regex1 = new System.Te ...

  3. LibLinear（SVM包）使用说明之（二）MATLAB接口

    LibLinear(SVM包)使用说明之(二)MATLAB接口 LibLinear(SVM包)使用说明之(二)MATLAB接口 zouxy09@qq.com http://blog.csdn.net/ ...

  4. IndexReader和IndexWriter的生命周期

    http://youyang-java.iteye.com/blog/1731205 对于IndexReader而言,反复使用 IndexReader .open打开会有很大的开销,所以一般在整个程序 ...

  5. Jmeter Constant Throughput Timer 使用

    Jmeter提供了一个非常有用的定时器,称为Constant Throughput Timer (常数吞吐量定时器),该定时器可以方便地控制给定的取样器发送请求的吞吐量. 右键点击fnng.cnblo ...

  6. CodeChef A

    问题是求出斐波那契数列的第n个,这里要用大数加法预处理,然后就可以了 代码: #include <iostream> #include <sstream> #include & ...

  7. JAVA大数类练手

    今天突然看到了OJ上的大数类题目,由于学习了一点大数类的知识.果断水了6道题......都是非常基础的.就当的练手的吧. 学到的只是一些大数类的基本操作.以后多做点这样的题,争取熟练运用水大数题... ...

  8. Bamboo简介

    前言     前面介绍了JIRA管理平台,那么本篇就来介绍关于自动编译项目的工具-Bamboo. 正题 1.简介 Atlassian Bamboo 是一款持续集成构建服务器软件(Build Serve ...

  9. Drawable(1)各种Drawable Resource介绍

    简介 Drawable Resources(可绘资源) 是一系列可以在屏幕上被绘制的资源文件,它不只是图片,可以是 xml文件,在xml文件中配置各种绘制参数. 常见Drawable Resource ...

  10. jasperreports-5.6 + jaspersoftstudio-5.6 生成pdf 文件中文无法正常显示问题

    jrxml字段属性设置: <textElement> <font fontName="宋体" pdfFontName="STSong-Light&quo ...