<!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. JQuery学习的尾声

    今天是最后一天学习JQuery,上周我们在狠狠的学习JavaScript,然后在这周我们又把JQuery扼杀在了摇篮里面,纵然学习的太快我们导致我们知识不牢固,可是我们没有那么多的时间学习的如此详细, ...

  2. MySql数据库设计表添加字段

    当要添加的字段属于整型,需要设置默认值 或者: alter table fp_user_base add hasPwd tinyint(4) not null default 0;

  3. Hibernate系列之基本配置

    一.概述 Hibernate是一个开放源码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使我们可以使用对象的编程思维来操作数据库. 二.配置准备 IDE:Eclipse 下载Jar包: ...

  4. Android数据存储之SD卡

    为了更好的存取应用程序的大文件数据,应用程序需要读. 写SD卡上的文件.SD卡大大扩充手机的存储能力. 操作SD首先要加权限: <!--在SDCard中创建与删除文件权限 --> < ...

  5. 【Linux】 解决报错： ImportError: libSM.so.6: cannot open shared object file: No such file or directory

    centos7 +  python3.6.4 我使用 pip3 install opencv-python 安装了opencv-python  之后,在使用 import cv2  报错如下 报错原因 ...

  6. WEB-DICT词库计划

    欢迎大家支持晓阳童鞋的词库计划,建立一个庞大的中文词库 地址如下:http://webdict.info/ 什么是WEB-DICT词库计划? WEB-DICT词表计划目标是通过机器学习算法以及人工标注 ...

  7. #import同@class之间的区别

    转自:http://blog.sina.com.cn/s/blog_a843a8850101b6a7.html 下面来说一下#import同class之间的区别 在ios中我们经常会在.h和.m中引入 ...

  8. MyBatis学习之多表查询

    一对多需求:即一张表class中又含有多张表(teacher,student)内容.现根据class_id 来获取对应的班级信息(包括学生和老师信息) 方式一:嵌套结果 使用嵌套结果映射来处理重复的联 ...

  9. Junit单元测试初识

    写过单元测试的小童鞋对于Junit一定不陌生,可小白我,刚刚开始接触,这里就把我的测试实验,做一下记录,以便以后方便查看.学习使用JUnit4,既然使用最新版本了,就不要再考虑老版本是如何使用的了,J ...

  10. CSS属性绘制图形（一）

    div部分: <div class="react-logo"> <div class="reactive"></div> & ...