JS定时器实现无缝滚动图片效果代码分享
导读:
本文介绍了JavaScript实现无缝滚动图片的具体代码,供大家参考,具体内容如下:
参数说明:
- setInterval 开启间隔型定时器
- clearTimeout 关闭定时器
- offsetWidth 获取宽度
- offsetLeft 获取向左偏移量
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝移动</title>
<style>
*{margin: 0; padding: 0;}
#div1{width:520px; height:170px; margin:20px auto; position: relative; /* !!! div1 的位置是相对的 */
background: pink; overflow: hidden} /* !!! overflow: hidden */
#div1 ul{position: absolute; left:0; top:0;} /* !!! ul 的 position:绝对的,控制left的值 */
#div1 ul li{float:left; width:130px; height:170px; list-style: none}
</style>
<script>
window.onload=function () {
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed = 2;
oUl.innerHTML+=oUl.innerHTML; // 相当于 4*2 张图像在移动
oUl.style.width=aLi[0].offsetWidth * aLi.length + 'px'; // !!!!!! offsetWidth
function Move() {
if(oUl.offsetLeft < - oUl.offsetWidth/2){ // 移动到左边的一半 就 回来
oUl.style.left='0';
}
if(oUl.offsetLeft>0){ // // 移动到右边的一半就回来
oUl.style.left = - oUl.offsetWidth/2 +'px';
}
oUl.style.left=oUl.offsetLeft + speed + 'px'; // !!!!!!!! offsetLeft
}
var Timer1= setInterval(Move, 30); // setInterval 开启间隔型定时器
oDiv.onmouseover=function () {
clearTimeout(Timer1);
};
oDiv.onmouseout=function () {
Timer1=setInterval(Move, 30);
};
document.getElementsByTagName('a')[0].onclick=function () {
speed=-2; // 向左的速度
};
document.getElementsByTagName('a')[1].onclick=function () {
speed=2; // 向右的速度
};
};
</script>
</head>
<body>
<a href="javascript:;" >向左移动</a>
<a href="javascript:;" >向右移动</a>
<div id="div1">
<ul>
<li><img src="img/aa.jpg"/></li>
<li><img src="img/bb.jpg"/></li>
<li><img src="img/cc.jpg"/></li>
<li><img src="img/dd.jpg"/></li>
</ul>
</div>
</body>
</html>
相关推荐
jquery插件Marquee.js实现无缝滚动效果代码分享
本文介绍胃jquery插件Marquee.js实现无缝滚动效果代码。Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果,配制代码如下:{ yScroll: "top" //…
2022-05-22 21:40:09 | 分类:默认 | 作者:myerob | 阅读:265 | 标签:jquery 插件 Marquee.js 实现 无缝 滚动 效果 | 收藏
javascript,JS怎么对url进行编码转换
项目中url遇到传参数传数组对象解析失败问题,采用转码方式解决,但并不清楚实际原理,研究了一下JS转码解码。Javascript语言用于编码的函数,一共有三个。escape()encodeURI()e…
2022-10-29 19:12:36 | 分类:JS | 作者:myerob | 阅读:388 | 标签:escape encodeURI encodeURIComponent | 收藏
jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明
nicescroll是一款基于jQuery的滚动条插件,使用简单,功能强大,较mCustomScrollbar而言:资源文件少,只要一个jquery.nicescroll.min.js即可,无须css…
2022-12-05 22:16:17 | 分类:JS | 作者:myerob | 阅读:284 | 标签:jQuery nicescroll | 收藏
滚动条插件 NiceScroll 使用详解
有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各…
2022-12-05 22:23:19 | 分类:JS | 作者:myerob | 阅读:480 | 标签:滚动条插件 NiceScroll 使用详解 | 收藏
mCustomScrollbar 滚动条使用详解
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A…
2022-12-05 22:29:52 | 分类:JS | 作者:myerob | 阅读:199 | 标签:mCustomScrollbar 滚动条使用详解 | 收藏
- 阅读榜
- 1. GB2312汉字编码字符集对照表
- 2. NTC热敏电阻B值3950(温度系数对照表)
- 3. BCD码的定义以及其与十进制数据转换方法(附验证工具)
- 4. 主席令13届第89号《中华人民共和国印花税法》
- 5. 个人所得税申报系统(扣缴端)如何删除已离职人员信息
- 6. 概率统计学中95%置信区间的系数1.96怎么得到的?
- 7. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 8. 离职员工申报个税删不掉 显示存在收入明细,若该人员已离职或退休,请将人员状态改为非正常。可改为非正常后还是不行
- 9. 什么情况下免征教育附加税,地方教育附加税?两附加费优惠政策
- 10. cdr怎么画环形阵列,cdr阵列复制快捷键