代码如下

<!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. RabbitMQ+PHP 消息队列环境配置

    参考文档:http://www.cnblogs.com/phpinfo/p/4104551...http://blog.csdn.net/historyasamirror/ar... 依赖包安装 yu ...

  2. HTML 之 Embed兼容问题

    首先IE只支持对Object的解析,火狐.谷歌.Safari只支持对Embed的解析. 1.传统的方法 <object classid="clsid:d27cdb6e-ae6d-11c ...

  3. C# 之 将string数组转换到int数组并获取最大最小值

    1.string 数组转换到 int 数组 " }; int[] output = Array.ConvertAll<string, int>(input, delegate(s ...

  4. C笔记01：关于printf函数输出先后顺序的讲解

    关于printf函数输出先后顺序的讲解!! 对于printf函数printf("%d%d\n", a, b);函数的实际输出顺序是这样的先计算出b,然后再计算a,接着输出a,最后再 ...

  5. SpringMVC中使用Jcaptcha实现校验码验证

    SpringMVC中使用Jcaptcha实现校验码验证:http://www.tuicool.com/articles/rMzAFj 本文将使用Jcaptcha实现校验码验证,并演示在Spring/S ...

  6. wince 位图的使用

    操作位图的基本步骤: *创建位图句柄 *加载位图对象 *创建内存设备描述对象,将位图选入内存设备描述对象 *使用绘图函数进行图形绘制 *删除位图句柄 创建位图句柄并且加载位图对象: *位图句柄 HBI ...

  7. C#入门教程（一）–.Net平台技术介绍、C#语言及开发工具介绍-打造C#学习教程

    一.什么是.Net平台? .Net平台是微软搭建的技术平台,技术人员在此平台上进行应用的搭建与开发.它提供了运行所必须的环境.NET Framework类库以及CLR(公共语言运行时).好比我们人类的 ...

  8. DataTables手动带参数提交至服务器

    一:参数传递及接收 JavaScript: 黄背景部分为参数传递关键 <script type="text/javascript"> var table; var de ...

  9. CSS3 变形记

    CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...

  10. Android开发中的PhoneGap基本使用

    一.关于PhoneGap Phonegap是一款开源的开发框架,旨在让开发者使用HTML.Javascript.CSS等Web APIs开发跨平台的移动应用程序.   二.PhoneGap在Andro ...