javascript实现的左右无缝滚动效果
更新时间：2016年09月19日 16:11:26 作者：朱羽佳
这篇文章主要介绍了javascript实现的左右无缝滚动效果,可实现左右平滑无缝滚动的效果,并且可响应鼠标滑过而停止滚动,非常简便实用,需要的朋友可以参考下
本文实例讲述了javascript实现的左右无缝滚动效果。分享给大家供大家参考，具体如下：
前面介绍过图片左右滚动，不过图片是间歇性的一张一张滚动，今天介绍的是几张图片一起进行无缝滚动，这是一个常用的 js 效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>无缝滚动——左右</title>
<link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
<style type="text/css">
#scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow:hidden;}
.btn_left{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat -70px -69px;position:absolute;top:20px;left:1px;z-index:1;}
.btn_left:hover{background:url(images/btn.jpg) no-repeat -70px 0;}
.btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat 1px -69px;position:absolute;top:20px;right:0;z-index:1;}
.btn_right:hover{background:url(images/btn.jpg) no-repeat 1px 0;}
#scroll .content{width:546px;height:108px;position:relative;overflow:hidden;margin:0 auto;}
#scroll ul{position:absolute;}
#scroll li{float:left;width:182px;height:108px;text-align:center;}
#scroll li a:hover{position:relative;top:2px;}
</style>
</head>
<body>
<div id="scroll">
<a href="javascript:;" class="btn_left"></a>
<a href="javascript:;" class="btn_right"></a>
<div class="content">
<ul>
<li><a href="#"><img src="images/1.jpg" width="178" height="108" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" width="178" height="108" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" width="178" height="108" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" width="178" height="108" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('scroll');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oDiv.getElementsByTagName('li');
var aBtn = oDiv.getElementsByTagName('a');
var speed = -1;
var timer = null;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
timer = setInterval(function(){
oUl.style.left = oUl.offsetLeft + speed + 'px';
if(oUl.offsetLeft < - oUl.offsetWidth / 2){
oUl.style.left = '0';
}else if(oUl.offsetLeft > 0){
oUl.style.left = - oUl.offsetWidth / 2 + 'px';
}
},30);
aBtn[0].onclick = function(){
speed = -1;
};
aBtn[1].onclick = function(){
speed = 1;
};
oUl.onmouseover = function(){
clearInterval(timer);
};
oUl.onmouseout = function(){
timer = setInterval(function(){
oUl.style.left = oUl.offsetLeft + speed + 'px';
if(oUl.offsetLeft < -oUl.offsetWidth / 2){
oUl.style.left = '0';
}else if(oUl.offsetLeft > 0){
oUl.style.left = - oUl.offsetWidth / 2 + 'px';
}
},30);
};
};
</script>
PS：如果想要改变移动速度，只需要改变 speed 的值。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了第六篇Bootstrap表格样式介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序存储数据，而是在每一个节点里存到下一个节点的指针(Pointer) 。下面我们用 JavaScript 代码对链表的数据结构进行实现2017-08-08
这篇文章主要为大家详细介绍了原生js实现商品筛选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了JS使用cookie设置样式的方法,涉及javascript样式的设置与cookie的读写相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
JavaScript是解释型语言是毋庸置疑的，但它是不是仅在运行时自上往下一句一句地解析的呢？2009-10-10
这篇文章主要介绍了js实现按钮控制带有停顿效果的图片滚动，，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
javascript中的this和函数息息相关，所以今天，我就给大家详细地讲述一番：javascript函数中的this ,需要的朋友可以参考下2017-08-08
关于JAVASCRIPT urldecode URL解码的问题
JS要实现单纯的编码解码轻而易举，escape、unescape就搞定，但是遇到不是完整的URL转码，就没办法了2012-01-01
这篇文章主要介绍了小程序hover-class点击态效果实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02![原生javascript自定义input[type=radio]效果示例](//img.jbzj.com/images/xgimg/bcimg9.png)
原生javascript自定义input[type=radio]效果示例
这篇文章主要介绍了原生javascript自定义input[type=radio]效果,结合实例形式分析了javascript模拟form表单中radio效果的相关操作技巧,需要的朋友可以参考下2019-08-08
![原生javascript自定义input[type=radio]效果示例](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论