基于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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 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
php类中private属性继承问题分析
2012/11/01 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
解决vue 表格table列求和的问题
2019/11/06 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
django orm模块中的 is_delete用法
2020/05/20 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
校友回访母校寄语
2015/02/26 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
springboot入门 之profile设置方式
2022/04/04 Java/Android