代码如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <link rel="stylesheet" href="">

    <script type="text/javascript" src="js/common.js"></script>

    <style type="text/css">

        body,div,ul,li,img{padding:0;margin:0;}

        #main{width:800px;height:200px; border:1px solid #666; margin:0px auto; position:relative;overflow: hidden;}

        #main ul{position:absolute; left:0;}

        #main li{list-style: none;float:left; }

        #top{width:800px; text-align: center;margin:50px auto 0px;}

    </style>

    <script type="text/javascript">

        window.onload = function(){

            var main = $('main');

            var speed = -3;

            var oUl = main.getElementsByTagName('ul')[0];

            var aLeft = $('top').getElementsByTagName('a')[0];

            var aRight = $('top').getElementsByTagName('a')[1];

            oUl.style.width  = oUl.clientWidth*2 + 'px';

            oUl.innerHTML += oUl.innerHTML;

            //向左移动

            var timer = setInterval(move,30);

            //点击向左的时候，减去3px

            aLeft.onclick = function(){

                speed = -3;

            }

            //点击向右的时候,加上3px

            aRight.onclick = function(){

                speed = 3;

            }

            //鼠标

            main.onmouseover = function(){

                clearInterval(timer);

            }

            main.onmouseout = function(){

                clearInterval(timer);

                timer = setInterval(move,30);

            }

            function move(){

                if (oUl.offsetLeft < -main.clientWidth) {

                      oUl.style.left = 0;

                } else if(oUl.offsetLeft >= 0) {

                    oUl.style.left = -main.clientWidth + 'px';

                }

                oUl.style.left = oUl.offsetLeft + speed + 'px';

            }

        }

    </script>

</head>

<body>

    <div id="top">

        <a href="javascript:;">向左</a>

        <a href="javascript:;">向右</a>

    </div>

    <div id="main">

        <ul>

            <li><img src="img/1.jpg" alt=""></li>

            <li><img src="img/2.jpg" alt=""></li>

            <li><img src="img/3.jpg" alt=""></li>

            <li><img src="img/4.jpg" alt=""></li>

        </ul>

    </div>

</body>

</html>

common.js

function $(id){

    return document.getElementById(id);

}

用JS写的无缝滚动特效的更多相关文章

  1. JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。

    一:html部分 <body> <input id="btn1" type="button" value="向左"> ...

  2. jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)

    最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...

  3. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  4. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  5. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. js文字的无缝滚动（上下）

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

  7. js实现标准无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  9. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

随机推荐

  1. 跳表SkipList

    原文:http://www.cnblogs.com/xuqiang/archive/2011/05/22/2053516.html 跳表SkipList   1.聊一聊跳表作者的其人其事 2. 言归正 ...

  2. 详解MYSQL数据库密码的加密方式及破解方法

    MYSQL加密方式:http://blog.csdn.net/listeningsea/article/details/8139641

  3. hadoop学习记录（三）HBase基本概念

    这一次开始学习HBase数据库. 我用的是VMWare + ubuntu16.04 +Hbase1.1.5 +hadoop2.6.0的组合. 经过亲自安装验证,版本间没有发生冲突,可以进行学习和开发. ...

  4. CMD相关命令初探

    今天想起来对个人写得一个自动启动绿色版MySQL服务器端的批处理文件,进行外观美化,使自己在启动时,能得心旷神怡一点.在网上学习了一点CMD批处理的知识.在此保留,以待后查. @      @:不显示 ...

  5. 向MyEclipse添加Oracle数据库

    向MyEclipse添加Oracle数据库 1.点击下面圈起来的位置,打开MyEclipse database Explorer视图. 2.在如图空白处右击,选择new进入New Database C ...

  6. [改善Java代码]使用package-info类为包服务

    建议50: 使用package-info类为包服务 Java中有一个特殊的类:package-info类,它是专门为本包服务的,为什么说它特殊呢?主要体现在3个方面: (1)它不能随便被创建 在一般的 ...

  7. 限制特定ip访问oracle

    在9i中真正起作用的是sqlnet.ora文件,我们修改sqlnet.ora其实是最好最快的方法. 在sqlnet.ora中增加如下部分 ----------------------------- # ...

  8. MySQL数据库的存储结构

    --把若干条sql语句封装起来,起个名字,叫做过程,也是没有返回值的函数 --把这个过程存储在数据库中->存储过程 --存储过程的创建过程 create procedure proceduceN ...

  9. 一个简单的XML与数组之间的转换

    xml是网络使用最多的数据交换格式,所以,不掌握怎么操作它,又有蛋疼的了. php中可以操作xml的类/函数很多,个人认为最简单的是SimpleXMLElement这个类,它的使用就跟其名字一样:简单 ...

  10. 在Tomcat中配置基于springside的项目

    注意点: Tomcat默认没有配置Transaction,需要在/Conf/Context.xml配置 1 <Transaction factory="org.objectweb.jo ...