<!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. MySQL按照汉字拼音首字母排序

    按照汉字的拼音排序,用的比较多是在人名的排序中,按照姓氏的拼音字母,从A到Z排序: 如果存储姓名的字段采用的是GBK字符集,那就好办了,因为GBK内码编码时本身就采用了拼音排序的方法(常用一级汉字37 ...

  2. 剑指offer——49

    丑数 因子只含2,3,5的数称为丑数. 怎么求第K大的丑数呢.K可以为10^7 最简单的做法是,对每个数判断是否为丑数. 复杂度为O( n * log(n) ),理论上是不行的. uglys[i] 来 ...

  3. RAC迁移至单机考虑几大因素

    数据库迁移几大因素 1. 停机时间 2. 源端,目标端 操作系统平台,版本,对应的数据库版本 3. 数据量 4. 外界因素,存储空间,网络等

  4. aws.s3的 upload 和putObject有什么区别

    相同点:上传或新增一个object : <template> <div class="page"> <!-- 参考:https://blog.csdn ...

  5. 题目1460：Oil Deposit(递归遍历图)

    题目链接:http://ac.jobdu.com/problem.php?pid=1460 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  6. [转]OpenStack Neutron解析

    1.为什么还需要linux bridge的部署方式? 2.哪一个网桥起着交换机的作用? 3.neutron如何实现私有网络的隔离 =================================== ...

  7. STM8L外部中断 为何 死循环 寄存器操作

    STM8L 系列单片机是 ST公司推出的低功耗单片机,与STM8S系列相比功耗降低了很多,但内部结构也删减了很多,使用时一定要仔细阅读手册.  这是第一次使用STM8,实现功能不是很复杂就没想研究库函 ...

  8. 如何搭建Packetbeat性能监控

    安装与配置JDK 1.  将jdk-8u111-linux-x64.tar.gz上传至Linux的/opt目录下,并执行解压命令: tar -zxvf jdk-8u111-linux-x64.tar. ...

  9. 【POJ2154】Color Pólya定理+欧拉函数

    [POJ2154]Color 题意:求用$n$种颜色染$n$个珠子的项链的方案数.在旋转后相同的方案算作一种.答案对$P$取模. 询问次数$\le 3500$,$n\le 10^9,P\le 3000 ...

  10. IOS控制系统手势返回

    self.navigationController.interactivePopGestureRecognizer.enabled = YES; //手势返回的代理,如果自定义了leftButtonI ...