代码如下

<!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. 解决iphone横屏时字体变大问题或者内容大小不一样等

    在样式表中增加: @media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}} @media scr ...

  2. css笔记08：id选择器之父子选择器

    1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. Virtualbox - Fatal: Could not read from the boot medium; system halted!

    刚装好的虚拟机系统,重新打开Virtualbox时出现个什么提示没认真看,顺势点了下去......结果虚拟机的xp系统打不开了,启动后出现:Fatal: Could not read from the ...

  4. Java Bean validation specification...

    http://www.ibm.com/developerworks/cn/java/j-lo-beanvalid/index.html

  5. php 发送邮件

    php我们可以使用系统的mail函数去发送邮件 但是需要配置一下邮件环境 这里选择使用PHPMailer  这样比较方便 首先下载PHPMailer:https://github.com/Synchr ...

  6. 最简单的Linux-ACL操作

    添加ACL setfacl -m u:'username':rw 'dir or file'   "-R可以迭代式的给目录下所有文件都添加相同的ACL" 查看ACL规则 getfa ...

  7. delphi xe5 android tts(Text To Speech)

    TTS是Text To Speech的缩写,即“从文本到语音”,是人机对话的一部分,让机器能够说话. 以下代码实现xe5 开发的文本转语音的方法 和访问蓝牙一样,这里用javaclass的接口实现 接 ...

  8. [改善Java代码]线程优先级只使用三个等级

    线程的优先级(priority)决定了线程获得CPU运行的机会,优先级越高获得的运行机会越大,优先级越低获得的机会越小.Java的线程有10个级别(准确的说是11个级别,级别为0的线程是JVM,应用程 ...

  9. HTTP - Cookie 机制

    HTTP 是种无状态的协议,即使用 HTTP 协议时,每次发送请求都会产生对应的新响应,协议本身不会保留之前一切的请求或响应报文的信息.这是为了更快地处理大量事务,确保协议的可伸缩性,而特意把 HTT ...

  10. NPOI读取Excel表格类

    public class NPOIHelper    {        private HSSFWorkbook workbook;        public static IWorkbook Lo ...