无缝滚动js代码通俗易懂(自写)
更新时间：2013年06月19日 17:40:13 作者：
本人闲暇时自写的无缝滚动js，代码简单实用，通俗易懂，晒出来与大家共享，感兴趣的朋友可以参考下哈
复制代码 代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
ul{ list-style:none;}
#div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;}
#div ul{ position:absolute; height:100px; left:0;}
#div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div");
var oUl=oDiv.getElementsByTagName("ul")[0];
var oLi=oUl.getElementsByTagName("li");
var oInput=document.getElementsByTagName('input');
oUl.innerHTML +=oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
var iSeep=-2;
var tamer=null;
clearInterval(tamer);
function starMove(){
tamer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+iSeep+"px";
if(-oUl.offsetLeft >= oUl.offsetWidth/2){
oUl.style.left="0px";
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+"px";
}
},30)
}
starMove();
oDiv.onmouseover=function(){
clearInterval(tamer);
}
oDiv.onmouseout=function(){
starMove();
}
oInput[0].onclick=function(){
iSeep=-2;
}
oInput[1].onclick=function(){
iSeep=2;
}
}
</script>
</head>
<body>
<input type="button" value="左">
<input type="button" value="右">
<div id='div'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
相关文章
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
去除字符串两端的空格，是字符串处理非常常用的方法如何trim() 、Ltrim() 、Rtrim()，可惜的是javascript中无此方法，下面有个不错的自定义教程感兴趣的朋友可以参考下2013-11-11
闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在，本文通过代码实例给大家介绍javascript闭包，对javascipt闭包相关知识感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了简单谈谈javascript中的变量、作用域和内存问题的相关资料,需要的朋友可以参考下2015-08-08
本文给大家分享的是JS/Jquery判断对象是不是空对象的方法，十分的简单实用，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要为大家详细介绍了p5.js临摹旋转爱心，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
webpack DllPlugin xxx is not defined解决办法
这篇文章主要介绍了webpack DllPlugin xxx is not defined解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
这篇文章主要介绍了基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了一个简单的Node.js异步操作管理器分享,需要的朋友可以参考下2014-04-04
这篇文章主要为大家详细介绍了js+canvas实现画板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
下面小编就为大家带来一篇JavaScript来实现打开链接页面的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论