1.实现原理：setInterval定时器，让某元素position的left属性定时滚动，使用到js中的元素的offsetLeft属性。

2.案例：1.css的实现是外div是4张图片的总宽度，设置relative然后overflow隐藏。子代有ul层设置为absolute;left属性移动时都是移动整个ul层的。;

2.4张图片无缝滚动，再复制4张（1，2，3，4）在第4张后面，li下有4张图片，获取li的offsetWidth(),然后算出ul的总宽度，当包着4张图片的ul层的offsetLeft滚动到一半的时候，将前4张的left变成0，这样滚动的时候就会无缝滚动了。设置ul层的offsetLeft来控制滚动。

　　　 3.demo地址：http://www.alanjs.comeze.com/study/demo11setInterval.html

<script type="text/javascript">

window.onload = function(){

    var slide = document.getElementById("slideImg");

    var moveUl = document.getElementById("moveUl");

    var aLi = slide.getElementsByTagName("li");

    var timer = null;

    var speed = -2;

    var prev = document.getElementById("prev");

    var next = document.getElementById("next");

    moveUl.innerHTML = moveUl.innerHTML + moveUl.innerHTML;                //先复制4张图片放在后面

    moveUl.style.width = aLi[0].offsetWidth*aLi.length + "px";            //获取一个li的宽度来设置ul层的总宽度

    timer = setInterval(move,30)

    slide.onmouseover = function(){

        if(timer){

            clearInterval(timer);

        }

    }

    slide.onmouseout = function(){

        timer = setInterval(move,30);

    }

    prev.onclick = function(){

        speed = -2;

    }

    next .onclick = function(){

        speed = 2;

    }

    function move(){

        if(moveUl.offsetLeft < -moveUl.offsetWidth/2){                    //向左滚动,当滚动到一半的时候，前面4张就跳到后面

            moveUl.style.left = "0";

        }

        if(moveUl.offsetLeft > 0){

            moveUl.style.left = -moveUl.offsetWidth/2 + "px";　　　　　　　　//向右滚动,当一开始滚动的时候，ul的left属性大于0，后面4张就立即跳到前面
  　　  } 
　　 　　moveUl.style.left = moveUl.offsetLeft+speed + "px"; //设置ul层的offsetLeft来控制滚动  
　　} 
} 
</script>
<style>

#wrap{width:1603px;margin:0 auto;height:300px;}

#sliderImg{width:1308px;height:203px;position:relative;overflow:hidden;border:1px solid red;}

#sliderImg ul{positin:absolute;left:0px;top:0px;}

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

</style>

<body>

    <div id="wrap">

        <div id="sliderImg">

            <ul id="moveUl">

                    <li><a href="javascript:;"><img src="data:images/slide5.jpg" /></a></li>

                    <li><a href="javascript:;"><img src="data:images/slide6.jpg" /></a></li>

                    <li><a href="javascript:;"><img src="data:images/slide7.jpg" /></a></li>

                    <li><a href="javascript:;"><img src="data:images/slide8.jpg" /></a></li>

            </ul>

        </div>

        <a id="prev" href="javascript:;">prev</a>

        <a id="next" href="javascript:;">next</a>

    </div>

</body>

2015.7.11js-10(无缝滚动)的更多相关文章

  1. js函数——倒计时模块+无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. js函数——倒计时模块和无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

  4. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  5. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  6. js实现标准无缝滚动

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

  7. JavaScript（六）——实现图片上下或者左右无缝滚动

    /*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...

  8. scrollLeft的相关问题（js横向无缝滚动）

    <div id="demo"> <div id="innerdemo"> <div id="demo1"> ...

  9. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

随机推荐

  1. jQuery使用scrollTop获取div标签的滚动条已滚动高度（jQuery版本1.6+时，用prop()方法代替attr()方法）

    $("#content").append('<div>' + data.msg + '</div>'+.'<br>');$('#content' ...

  2. 在eclipse中查看sources源码和JavaDoc帮助文档

    今天学习Netty的过程中,从官网下载的netty里面的内容如下: 其中jar文件夹里面的内容如下: 可以看到每一个具体的jar包就对应有一个sources.jar包,然后所有的帮助文档在javaDo ...

  3. python缓存装饰器，第二种方式(二)

    来个简单的装饰器 def cached_method_result(fun): """方法的结果缓存装饰器""" @wraps(fun) d ...

  4. PMP模拟考试-2

    1. Increasing resources on the critical path activities may not always shorten the length of the pro ...

  5. 5 -- Hibernate的基本用法 --1 1 对象/关系数据库映射(ORM)

    ORM的全称是Object/Relation Mapping ,即对象/关系数据库映射.ORM可理解成一种规范,它概述了这类框架的基本特征:完成面向对象的编程语言到关系数据库的映射.当ORM框架完成映 ...

  6. Go面向对象（三）

    go语言中的大多数类型都是值予以,并且都可以包含对应的操作方法,在需要的时候你可以给任意类型增加新方法.二在实现某个接口时,无需从该接口集成,只需要实现该接口要求的所有方法即可.任何类型都可以被any ...

  7. nginx: [error] open() "/run/nginx.pid" failed (2: No such file or directory)

    当你执行sudo nginx -s reload时出现nginx: [error] open() "/run/nginx.pid" failed (2: No such file ...

  8. Import VMware ESXi from VirtualBox

    VirtualBox can export appliance VMs to OVF format. And you can import the ovf format to VMware ESXi, ...

  9. 【GIS】Cesium1.49编译

    1.npm install 2.npm install --save-dev gulp 3.gulp default 4.npm run build 5.npm start 遇到问题 1.gulp不好 ...

  10. HttpClient（五）-- 模拟表单上传文件

    1.maven依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId ...