<!DOCTYPE HTML>
<html>

<head>
        <meta charset="utf-8" />
        <title>无缝滚动</title>
        <link href="">
    </head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a{
            cursor: pointer;
        }
        #div1 {
            width: 800px;
            height: 130px;
            margin:50px auto;
            position: relative;
            background: red;
            overflow: hidden;
        }
        ul {
            position: absolute;
            left: 0;
            top: 0;
        }
        li {
            float: left;
            list-style: none;
        }
        li img {
            width: 200px;
            height: 130px;
        }
    </style>

<script>
         //        setInterval(function() {
         //                var oDiv=document.getElementById("div1");
         //                oDiv.style.left=oDiv.offsetLeft+10+'px';
         //        },30);
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var speed=2;
            
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
            function move() {
                if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                    oUl.style.left = '0';
                }
                //向左滚
                //        oUl.style.left=oUl.offsetLeft-2+'px';
                //向右滚
                if (oUl.offsetLeft >0) {
                    oUl.style.left =-oUl.offsetWidth /2+'px';
                }
                oUl.style.left = oUl.offsetLeft + speed + 'px';
            }
            var timer=setInterval(move, 30);
            oDiv.onmouseover=function(){
                clearInterval(timer);
            };
            oDiv.onmouseout=function(){
                timer=setInterval(move, 30);
            };
            document.getElementsByTagName('a')[0].onclick=function(){
                speed=-2;
            };
            document.getElementsByTagName('a')[1].onclick=function(){
                speed=2;
            }
        }
    </script>

<body>
    <a>向左走</a>
    <a>向右走</a>
        <div id="div1">
            <ul>
                <li><img src="data:images/1.jpg" /></li>
                <li><img src="data:images/2.jpg" /></li>
                <li><img src="data:images/1.jpg" /></li>
                <li><img src="data:images/2.jpg" /></li>
            </ul>
        </div>
    </body>

</html>

兼容IE7以上的无缝滚动，带箭头、停顿的更多相关文章

  1. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  2. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  3. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

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

  4. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  5. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  6. [Js]无缝滚动

    效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向 ...

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

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

  8. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  9. js函数——倒计时模块+无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. Python网络编程笔记

    01. UDP(user datagram protocol)用户数据报协议 01. 特点 01. 无连接 02. 不可靠 03. 每个被传输的数据报必须限定在64KB之内 02. 优点:效率高s 缺 ...

  2. N76E003之IO控制

    N76E003最多支持26个可位寻址的通用I/O引脚,分成4组 P0 到 P3 .每一个端口有它的端口控制寄存器(Px).端口控制寄存器的写和读有不同的意思.写端口控制寄存器设置输出锁存逻辑值,读端口 ...

  3. Java单播、广播、多播(组播)

    一.通信方式分类 在当前的网络通信中有三种通信模式:单播.广播和多播(组播),其中多播出现时间最晚,同时具备单播和广播的优点. 单播:单台主机与单台主机之间的通信 广播:当台主机与网络中的所有主机通信 ...

  4. Android开发懒人库 -- ButterKnife （转载）

    ButterKnife:8.1.0的使用   http://www.jianshu.com/p/0392199a682b http://www.cnblogs.com/flyme/p/4517560. ...

  5. drizzleDumper的原理分析和使用说明

    https://blog.csdn.net/qq1084283172/article/details/53561622 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...

  6. Android设计和开发系列第二篇：Action Bar(Design)

    Action Bar The action bar is a dedicated piece of real estate at the top of each screen that is gene ...

  7. ssh连接超时时间(ssh timeout)的设置方法

    问题:当某台远程主机宕机时,ssh远程过去会耗费很多的时间去连接,结果还是会失败. 这个时候可以设置超时时间 ssh -o ConnectTimeout= 192.168.0.10

  8. Java、JavaWeb中单元测试用到的测试方法

    写出的代码做单元测试时,一定要记住从三个方面出发:1.成功  2.异常  3 逻辑错误(即没有异常也可能程序运行出最后结果,可是呢?呵呵).这就是在做测试时我要牢记的三个方面,同时思维要严谨也即做事要 ...

  9. centos 安装laravel

    1.下载composer并全局安装 curl -sS https://getcomposer.org/installer | php 2.查看全局命令目录 echo $PATH 移动composer到 ...

  10. XCache 一种快速可靠的PHP操作码缓存

    1,错误报告开启 错误报告是在PHP中一个非常有用的功能,应同时在开发阶段启用. 这可以帮助我们确定我们的代码中的问题. 最常用的功能是“E_ALL”,这有助于我们发现所有的警告和严重错误. 必须指出 ...