代码如下

<!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. 机器学习经典算法详解及Python实现--基于SMO的SVM分类器

    原文:http://blog.csdn.net/suipingsp/article/details/41645779 支持向量机基本上是最好的有监督学习算法,因其英文名为support vector  ...

  2. UVA 10006 - Carmichael Numbers 数论（快速幂取模 + 筛法求素数）

      Carmichael Numbers  An important topic nowadays in computer science is cryptography. Some people e ...

  3. Qt增加webp格式支持

    Webp 是一种图片文件格式,能在相同质量的情况下比 PNG 文件尺寸小巧. Chrome 应用商店图片已全部转换为 WebP 格式 YY(基于Qt开发)也已经把图片格式换成webp了 http:// ...

  4. C语言第三节关键字、标识符、注释

    学习语法之前的提醒 C语言属于一门高级语言,其实,所有高级语言的基本语法组成部分都是一样的,只是表现形式不太一样 就好像亚洲人和非洲人,大家都有人类的结构:2只 手.2只脚.1个头,只是他们外表不太一 ...

  5. python 调用zabbix api接口实现主机的增删改查

    python程序调用zabbix系统的api接口实现对zabbix_server端主机的增删改查,使用相关功能时候,需要打开脚本中的相关函数. 函数说明: zabbixtools()  调用zabbi ...

  6. 信号量和PV操作写出Bakery算法的同步程序

    面包店烹制面包及蛋糕,由n个销售员卖出.当有顾客进店购买面包或蛋糕时,应先在取号机上取号,然后等待叫号,若有销售员空闲时便叫下一号,试用信号量和PV操作写出Bakery算法的同步程序. 设计要求 1) ...

  7. 【报错】"The constructor Notification(int, CharSequence, long) is deprecated

    Notification的构造方法 Notification(int, CharSequence, long) 在API11之后就淘汰了,之后的API需要用Notification.Builder() ...

  8. KindEditor编辑器, 利用ajax动态切换编辑器内容

    // 后台成功返回数据后的js处理 KindEditor.remove('#content_id'); // 先移除之前创建的编辑器 var editor = KindEditor.create('# ...

  9. IOS微信中看文章跳转页面后点击返回无效

    经过查找原因发现,下面两种链接,链接1返回不了,链接2可以返回. 链接1:http://mp.weixin.qq.com/s?__biz=MzA5NDY5MzcyNA==&mid=265089 ...

  10. TCP基础知识

    TCP/IP网络协议栈分为应用层(Application).传输层(Transport).网络层(Network)和链路层(Link)四层.如下图所示 两台计算机通过TCP/IP协议通讯的过程如下所示 ...