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. Ubuntu下从外网上北邮人BT

    首先你需要有北邮的VPN账号和密码,只要是北邮的学生都有 账号和密码不懂的请查看 VPN账号密码说明 接下来登录 https://sslvpn.bupt.edu.cn,输入账号和密码 已经登录好了 但 ...

  2. Objective-c: 移除字符串中的指定字符

    string = [[string componentsSeparatedByCharactersInSet:[NSCharacterSet characterSetWithCharactersInS ...

  3. JavaScript高速掌握

    .document.write(""); 输出语句 .JS中的凝视为//或/* */ .传统的HTML文档顺序是:document->html->(head,body) ...

  4. Express框架Fetch通信

    最近自己弄个博客站点,前台用的React,服务器用的是node实现的,node是第一次接触,所以还在摸索,这篇mark下通信时遇到的坑. fetch配置: window.fetchUtility = ...

  5. java中*和**的作用

    “*”就表示了所有的文件,但是“*”并不包括子目录下的文件: “**”匹配包含任意级子目录中所有的文件

  6. node.js和socket.io实现im

    im——Instant Messaging 即时通讯 基本技术原理 (1)通过IM服务器登陆或注销 (2)用户A通过列表找到B,用户B获得消息并与之交谈 (3)通过IM服务器指引建立与B单独的通讯通道 ...

  7. VMware12多台虚拟机上网设置

    1.根据镜像安装好linux系统, 2.  把网络适配器移除后,重新添加试试 3. 当按照上述配置后还是无法上网,把VMnet0 桥接模式的自动 ,这里重新点击下自动设置(其实没有做到自动配置) 4. ...

  8. [转]总结使用Unity 3D优化游戏运行性能的经验

    转载自:http://www.gameres.com/msg_221889.html 作者:Amir Fasshihi 流畅的游戏玩法来自流畅的帧率,而我们即将推出的动作平台游戏<Shadow ...

  9. ios学习之UIWebView网页视图

    转载于爱德凡的百度空间,地址:http://hi.baidu.com/aidfan/item/34a720866b33cbcdef083d37 UIWebView 使用详解 一.UIWebView加载 ...

  10. nyoj 1239 引水project （河南省第八届acm程序设计大赛）

    题目1239 pid=1239" style="color:rgb(55,119,188)">题目信息 pid=1239" style="col ...