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. Android Studio使用技巧小记

    1.Android Studio中查看genymotion模拟器中的文件的方法: Tools-->Android Device Moniter 2.快速定位开源代码某功能的实现方法 右击项目-- ...

  2. android app rate on google play and amazon

    http://stackoverflow.com/questions/11393191/linking-back-to-amazon-app-store-for-ratings   public st ...

  3. c语言中左移、右移中的高位需要注意

    有符号数,左移可能会破坏符号位. 右移时,要注意高位符号. 0X表示十六进制.十六进制每位数值由 0-f表示.所以0XC0 对应 二进制为 11000000B10进制与16进制间关系:1 -- 0X1 ...

  4. PHP 免费获取手机号码归属地

    一.淘宝网API API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443 参数: tel:手机号码 返回 ...

  5. 为什么要使用JS模板引擎

    我之前在写一个输入联想控件的时候,改过好几个版本,每个版本不是因为性能不好就是因为代码凌乱而被推翻,最后用了understore模板引擎,效果有明显改善.整好这两天在研究互联网技术架构,发现很多的开发 ...

  6. virtio-netdev 数据包的发送

    在前面几文中已经大体介绍了virtio的重要组成,包含virtio net设备的创建,vring的创建,与virtio设备的交互方式,我们就从网络数据包的发送角度来看下virtio的详细使用流程. [ ...

  7. Go之单元测试

    go单元测试需要按照gotest的规范来编写: 1.文件名必须以xx_test.go命名 2.方法必须是Test[^a-z]开头 3.方法参数必须 t *testing.T   在运行gotest的时 ...

  8. AcceptEx 以及 获取远程IP与port

    // 獲取本地以及遠程的IP和port setsockopt(clientfd, SOL_SOCKET, SO_UPDATE_ACCEPT_CONTEXT, (char *)&listenfd ...

  9. SELECT中常用的子查询操作

    MySQL中的子查询 是在MySQL中经常使用到的一个操作,不仅仅是用在DQL语句中,在DDL语句.DML语句中也都会常用到子查询. 子查询的定义: 子查询是将一个查询语句嵌套在另一个查询语句中: 在 ...

  10. 【GIS】GDAL Python 影像裁剪

    # -*- coding: utf-8 -*- """ Created on Fri Nov 30 11:45:03 2018 @author: Administrato ...