无缝滚动效果在各大网站都有这样的需求,应用非常广泛,下面小编给大家分享基于 JS 实现无缝滚动思路及代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
原理:
1. 给 ul 一个绝对定位使其脱离文档流,left 设置为 0,把图片塞进 ul 里,编写一个 "移动" 函数,函数功能能够使 ul 的 left 以一个正速度向右跑动,
2. 设置一个定时器,让 "移动" 函数每 30(参数可变) 毫秒执行一次
3. 因为 ul 的长度会 "跑" 完,此时可以使 ul 的 content 也就是 img 增加一倍,
oUl.innerhtml +=oUl.innerHTML;
4. 此时因为 ul 的 content 增加,其 width 也会随着增大,根据实际项目展示图片数量可能改动或不确定性,
oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';
5. 往 "移动" 函数里增添代码。
5.1 此时 ul 向右移动,判断当 ul 的 offsetLeft>0 时,把 ul 向左拉 "一半 ul 的宽度",也就是使 ul 能够向右一直无限制移动
- if(oUl.offsetLeft>0){
- oUl.style.left = -oUl.offsetWidth/2+'px';
- }
5.2 当 ul 向左移动,其 offsetLeft 跑了 ul 一半的宽度时,把整个 ul 拉回至初始的 left:0;
- if (oUl.offsetLeft<-oUl.offsetWidth/2) {
- oUl.style.left = 0;
- }
上代码:
html:
- <div id="box">
- <ul>
- <li>
- <a href="#">
- <img src="1.jpg" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="2.jpg" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="3.jpg" />
- </a>
- </li>
- <li>
- <a href="#">
- <img src="4.jpg" />
- </a>
- </li>
- </ul>
- </div>
CSS:
- * {
- margin: 0;
- padding: 0;
- }#box {
- width: 480px;
- height: 110px;
- border: 1px red solid;
- margin: 100px auto;
- overflow: hidden;
- position: relative;
- }#box ul {
- position: absolute;
- left: 0;
- top: 5px;
- }#box ul li {
- list - style: none;
- float: left;
- width: 100px;
- height: 100px;
- padding - left: 16px;
- }#box ul li img {
- width: 100px;
- height: 100px;
- }
js:
- <script>
- window.onload = function(){
- var oDiv = document.getElementById('div1');
- var oUl = oDiv.getElementsByTagName('ul')[0];
- var oLi = oUl.getElementsByTagName('li');
- var aA = document.getElementsByTagName('a');
- var iSpeed = 10; //让ul开始就具有一个速度走动
- oUl.innerHTML +=oUl.innerHTML;
- oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';
- aA[0].onclick = function(){
- iSpeed = -10;
- };
- aA[1].onclick = function(){
- iSpeed = 10;
- };
- function fnMove(){
- if (oUl.offsetLeft<-oUl.offsetWidth/2) { //负数是因为ul的left是负数 oUl.style.left = 0;
- }
- else if(oUl.offsetLeft>0){ oUl.style.left = -oUl.offsetWidth/2+'px';
- }
- oUl.style.left = oUl.offsetLeft+iSpeed+'px'; //整个ul向右移动
- };
- var timer = null;
- clearInterval(timer);
- timer = setInterval(fnMove,30);
- oUl.onmouseover = function(){
- clearInterval(timer);
- };
- oUl.onmouseout = function(){
- timer = setInterval(fnMove,30); //当鼠标移开的时候执行这个定时器
- };
- };
- </script>
以上所述是小编给大家分享的基于 JS 实现无缝滚动思路及代码,希望能够帮助到大家,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0301/265107.html