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. bash: /usr/bin/npm: No such file or directory

    一个整得很烂了的Ubuntu服务器, 各种问题乱出. npm老是升不到最新版(一直显示1.4),于是我干脆删了, 结果再去装却装不上了, 如果用apt-get install npm安装, 就得到如下 ...

  2. Android开发中常用的库总结(持续更新)

    这篇文章用来收集Android开发中常用的库,都是实际使用过的.持续更新... 1.消息提示的小红点 微信,微博消息提示的小红点. 开源库地址:https://github.com/stefanjau ...

  3. QT编译错误：invalid application of 'sizeof' to incomplete type 'Qt3DRender::QPickEvent'

    执行3D常将中实体的pick操作,结果出现了编译错误:invalid application of 'sizeof' to incomplete type 'Qt3DRender::QPickEven ...

  4. 改造phpcms-v9自带的字符串截取函数

    1.phpcms-v9自带的字符串截取函数在phpcms/libs/functions/global.func.php文件中: /** * 字符截取 支持UTF8/GBK * @param $stri ...

  5. phpcms列表页调用 点击量

    很多朋友经常问Phpcms v9的首页.列表页.内容页点击量如何调用.现在就给大家分享phpcms V9如何分别在首页.列表页.内容页调用点击量代码: 1. Phpcms v9首页调用点击量{pc:c ...

  6. oracle创建HR示例数据库脚本hr_main.sql分享

    需求描述: 今天一同事想要在测试库上进行SQL练习,帮忙安装下这个示例数据库,在此记录下. 操作过程: 1.上传hr_main.sql脚本(10g 11g都可用) 脚本下载链接: https://pa ...

  7. Git初级使用教程

    什么是 Git? Git 是一款免费的.开源的.分布式的版本控制系统.旨在快速高效地处理无论规模大小的任何软件工程. 每一个 Git克隆 都是一个完整的文件库,含有全部历史记录和修订追踪能力,不依赖于 ...

  8. oracle sqlplus常用命令大全

    show和set命令是两条用于维护SQL*Plus系统变量的命令 SQL> show all --查看所有68个系统变量值 SQL> show user --显示当前连接用户 SQL> ...

  9. 【MacOS】brew－python3

    mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 ...

  10. Python时间戳与时间字符串互相转换实例代码

    #设a为字符串import timea = "2011-09-28 10:00:00" #中间过程,一般都需要将字符串转化为时间数组time.strptime(a,'%Y-%m-% ...