基于JS实现无缝滚动思路及代码分享


Posted in Javascript onJune 07, 2016

原理:

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实现无缝滚动思路及代码,希望能够帮助到大家,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
layui分页效果实现代码
May 19 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
回顾Javascript React基础
Jun 15 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 #Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 #Javascript
PassWord输入框代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 #Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 #Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 #Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 #Javascript
You might like
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
javascript 闭包疑问
2010/12/30 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
C语言基础笔试题
2013/04/27 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
新闻专业应届生求职信
2013/10/31 职场文书
高中班长自我鉴定
2013/12/20 职场文书
童装店创业计划书
2014/01/09 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
大学信息公开实施方案
2014/03/09 职场文书
工厂车间标语
2014/06/19 职场文书
会计出纳岗位职责
2015/03/31 职场文书
营运督导岗位职责
2015/04/10 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
python字符串的一些常见实用操作
2022/04/06 Python