Javascript 实现图片无缝滚动
更新时间：2014年12月19日 15:59:14 投稿：hebedich
这篇文章主要介绍了Javascript 实现图片无缝滚动的相关资料,需要的朋友可以参考下
效果 ： 鼠标移入图片 停止滚动， 鼠标移出自动滚动
可以调整向左或右方向滚动
复制代码 代码如下:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
overflow: hidden;
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background: red;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;
}
</style>
复制代码 代码如下:
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li>
<img src="img/无缝滚动/1.jpg" />
</li>
<li>
<img src="img/无缝滚动/2.jpg" />
</li>
<li>
<img src="img/无缝滚动/3.jpg" />
</li>
<li>
<img src="img/无缝滚动/4.jpg" />
</li>
</ul>
</div>
</body>
以上是一个简单的布局，下面是主要的Javascript 代码
复制代码 代码如下:
<script type="text/javascript">
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;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
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';
}
var timer = setInterval(move, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
};
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
document.getElementsByTagName('a')[0].onclick = function() {
speed = -2;
};
document.getElementsByTagName('a')[1].onclick = function() {
speed = 2;
};
}
</script>
简单讲下思路：
首先设置ul 里面的图片一共有8张 oUl.innerHTML += oUl.innerHTML;
在 计算ul的宽度为 li的实际宽度*8
之后将 多余的内容隐藏
注意 ： oUl.offsetLeft 肯定是负值
所以判断的时候不要把负号漏掉
复制代码 代码如下:
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
这段表示 图片滚动到一半了,迅速把图片拉回来，因为程序执行的太快，所以几乎看不出来 实现无缝滚动
最后使用 变量 speed 来控制左右方向的滚动。
以上代码只是实现了最基本的功能，小伙伴们可以在此基础上继续完善。
相关文章
在本文中给大家分享如何使用raphael.js来完成地图交互,raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能,需要的朋友可以参考下2014-02-02
使用JavaScript开发的时候,很多人多多少少都会被this的指向问题搞蒙圈,下面这篇文章主要给大家介绍了关于JavaScript中this例题实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
在实际工作中经常会遇见把秒数转化为时分秒的问题,如何处理呢?下面这篇文章主要给大家介绍了关于JS如何将秒数转化为时分秒形式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了微信小程序之小豆瓣图书实例，具有一定的参考价值，有兴趣的同学可以了解一下。2016-11-11
关于Error:Unknown option '--inline'报错的解决办法
这篇文章主要给大家介绍了关于Error:Unknown option '--inline'报错的解决办法,文中将解决的办法介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
在项目开发中，经常会遇到同一天内的时间大小比较，下面小编给大家带来了JavaScript比较同一天的时间大小实例代码，需要的朋友参考下2018-02-02
这篇文章主要介绍了详解如何在webpack中做预渲染降低首屏空白时间，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
关于取不到由location.href提交而来的上级页面地址的解决办法
验证上级页面来源取不到由location.href提交而来的页面地址，搜索了一大堆没有合适的解决办法，突然想到通过模拟JS点击链接的方法2009-07-07
这篇文章主要介绍了解读input标签的value属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了JavaScript实现滑动选择日期功能，基于sui-mobile的移动端实现，感兴趣的小伙伴们可以参考一下2016-06-06
最新评论