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. js判断字符串是否json格式

    function isJSON(str) { if (typeof str == 'string') { try { var obj=JSON.parse(str); if(typeof obj == ...

  2. mysql5.7 java读取乱码

    一直很自信自己编码格式设置的都没有问题,以前就算遇到也都很快找到问题并解决.没想到掉进了5.7的坑里. 这段时间实习,大多做的都是.net+sqlserver,确实不用操心这些问题.主要还是各自默认编 ...

  3. uva 548 Tree（通过后序，先序重建树+dfs）

    难点就是重建树,指针參数的传递今天又看了看.应该是曾经没全然弄懂.昨天真没效率,还是不太专心啊.以后一定得慢慢看.不能急躁,保持寻常心,. 分析: 通过兴许序列和中序序列重建树,用到了结构体指针.以及 ...

  4. SharePoint PowerShell部署开发好的WebPart到服务器上

    内容仅供参考,需结合实际需求来处理. =========SharePoint 环境下运行ps1文件,ps1内容如下======= Set-ExecutionPolicy ByPass Add-PSSn ...

  5. 关系型数据库 和 非关系型数据对比 以及 MySQL与Oracle对比

    一.关系型数据库 关系型数据库,是指采用了关系模型来组织数据的数据库.    关系模型1970年提出的,关系模型的概念得到了充分的发展并逐渐成为主流数据库结构的主流模型.    简单来说,关系模型指的 ...

  6. unity之UGUI屏幕分辨率調整

    1.Canvas的屬性配置: 2.Canvas Scaler的屬性配置: 3.根據不同的屏幕比例動態寫改碩放基準: public float standard_width = 800f; //初始宽度 ...

  7. mybatis启动报错Mapped Statements collection already contains value for com.autoyol.mapper.trans.TransDispatchingMapper解决

    1.检查sqlsession配置,在applicationContext文件中.检查mybatis配置文件. 2.检查TransDispatchingMapper.java 是接口类,无注解. 3.T ...

  8. Go之并发处理（售票问题）

    老问题:模拟一个售票窗口进行售票 先定义类型Ticket(车票)和Conductor(销售员)--偷懒了,把售票和产票都交给Conductor了 package util import () //-- ...

  9. vue中使用mockjs

    第一步安装mockjs:npm i mockjs -S 在src目录下新建mock文件夹,文件夹添加test.js test.js内容如下: import Mock from 'mockjs'; co ...

  10. luasocket 接收数据

    在游戏客户端使用luasocket作为网络通信的手段, 有一点很蛋疼, 就是它的receive是阻塞的,  那界面就卡死在那里了,  不过有一个函数:settimeout(), 传入参数0, 表示如果 ...