JavaScript无缝滚动效果的实例代码
更新时间：2017年03月27日 11:13:27 作者：酷扬
本文给大家分享一段实例代码有关js实现无缝滚动效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
width: 600px;
height: 200px;
margin: 60px auto;
overflow: hidden;
position: relative;
}
ul {
list-style-type: none;
width: 2000px;
position: absolute;
top: 0;
left: 0;
}
li {
float: left;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul id="gun">
<li><img src="01.jpg" alt="" /></li>
<li><img src="02.jpg" alt="" /></li>
<li><img src="03.jpg" alt="" /></li>
<li><img src="04.jpg" alt="" /></li>
<li><img src="01.jpg" alt="" /></li>
<li><img src="02.jpg" alt="" /></li>
</ul>
<script type="text/javascript">
var box = document.getElementById("box");
var gun = document.getElementById("gun");
function $(i){
return document.getElementsByTagName("img")[i];
}
var num = 0;
all();
function all(){
var shi= setInterval(fun,5);
gun.onmouseover=function (){
clearInterval(shi);
}
gun.onmouseout=function (){
all();
}
function fun(){
if(num<=-1200){
num=0;
}else{
gun.style.left=num+"px";
num--;
}
}
}
</script>
</div>
</body>
</html>
以上所述是小编给大家介绍的JavaScript无缝滚动效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了js实现简单的前端分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
window.showModalDialog参数传递中含有特殊字符的处理方法
程序运行出错经，过检查发现传递的数据中出现了#等特殊字符，浏览器只取到#号前面的数据，后面的被截断，下面为大家介绍下正确的处理方法2013-06-06
这篇文章主要介绍了浅析微信扫码登录原理(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了如何使用JavaScript实现随机点名效果,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要为大家详细介绍了javascript创建对象的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
js中eval()函数可计算某个字符串,下面这篇文章主要给大家介绍了关于js中eval方法详解之eval方法的初级应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了JavaScript函数IIFE使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这是本系列的第三篇文章了，前面2篇网友们反馈回来不少的消息，加上最近2天比较忙，一直没来得及整理，周末了，赶紧给大家整理下发出来，本文讲的是node.js模块2014-05-05
这篇文章主要介绍了微信小程序淘宝首页双排图片布局排版代码,本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
添加一个以前写的table的spliter给大家...2007-01-01
最新评论