代码如下

<!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. java_io_操作封装

    package com.wiker; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import j ...

  2. Helpers\Hooks

    Helpers\Hooks Add modules with hooks The hooks helper allows modules to be created within the module ...

  3. iOS通过UIAlertController弹出底部选择框来调用相机或者相册

    UIAlertController *alertVc = [UIAlertController alertControllerWithTitle:nil message:nil preferredSt ...

  4. KindEditor图片上传到七牛云

    自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEdito ...

  5. x264命令参数与代码中变量的对应关系

    帧类型选项:  -I/--keyint i_keyint_max 最大IDR帧间距,默认为250  -i/--min-keyint i_keyint_min 最小IDR帧间距,默认为25  --sce ...

  6. [未完成]关于GUI Java图形化界

    "笔记内容完成,整体未完成" GUI 图形化用户界面 用java做图形化用户界面的程序不多,大多用C++和defy.因为,Java做图形化效率低. 首先你要安装一个虚拟机,C++是 ...

  7. CSS行高--line-height

    遇到的问题:在css中,不理解line-height:1与line-height:1px的区别 发现的过程:最近在学做一个网站的过程中,设置两行文字之间的行高时需要用到line-height,发现了这 ...

  8. Jsoup 的认识和简单使用

    之前做学校软件协会APP的时候,由于自己不会在服务端写接口,所以服务端一直是由另一位Z同学完成的,但是突然Z同学被老师调到泸州帮以前的学长做一个月的临时web开发去了,所以协会APP的接口只做了一部分 ...

  9. 设计模式——设计模式之禅day1

    单一职责 原则的定义是:应该有且仅有一个原因引起类的变更. 单一职责原则有什么好处: 类的复杂性降低,实现什么职责都有清晰明确的定义: 可读性提高,复杂性降低,那当然可读性提高了: 可维护性提高,可读 ...

  10. JSP之session

    index.jsp: <form id="form1" name="form1" method="post" action=" ...