2015.7.11js-10(无缝滚动)

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>

转载于:https://www.cnblogs.com/alantao/p/4639151.html

2015.7.11js-10(无缝滚动)相关推荐

js笔记（10）之无缝滚动
无缝滚动<!DOCTYPE html> <html> <head><meta charset="utf-8"><title&g ...
js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果)，本文实例讲述了JS实现的N多简 - phpStudy...
JS实现的N多简单无缝滚动代码(包含图文效果) 本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. ...
解决DataList控件无缝滚动图片(转)
解决问题:1.无缝滚动:2.页面初始时图片显示页面上,而不是才从一个方向出来. 将绑定数据绑定到DataList 控件后.其他数据控件也可使用此方法. 页面源代码: <div id=&quo ...
JavaScript之图片的无缝滚动
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
利用scrollTop 制作图片无缝滚动
<!doctype html> <title>javascript无缝滚动 by 司徒正美</title> <meta charset="utf-8 ...
banner轮播无缝滚动 jq代码
HTML: 1 <div class="box"> 2 <ul> 3 <li>11111</li> 4 <li>2222 ...
无缝滚动图片——源码
图片已上传,请到我的资源部去下载,不用积分,--无缝滚动图片http://download.csdn.net/detail/qq_34137397/9665933 </head> < ...
JS-内置对象内置构造函数事件-拖拽轮播图无缝滚动
内置对象&内置构造函数日期时间格式 // 创建一个当前时刻的日期时间对象 var date = new Date(); // 获取date对象中的年月日时分秒 var y = date.ge ...
用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

2015.7.11js-10(无缝滚动)

2015.7.11js-10(无缝滚动)相关推荐

最新文章

热门文章