基于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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
checkbox 多选框 联动实现代码
Oct 22 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
详解js闭包
2014/09/02 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
vue实现评价星星功能
2020/06/30 Javascript
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python如何实现内容写在图片上
2018/03/23 Python
python3中for循环踩过的坑记录
2020/12/14 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
食品工程专业求职信
2014/06/15 职场文书
安全演讲稿开场白
2014/08/25 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
先进个人材料怎么写
2014/12/30 职场文书
财政局长个人总结
2015/03/04 职场文书
七年级作文之秋游
2019/10/21 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
MySQL的安装与配置详细教程
2021/06/26 MySQL
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技