JavaScript中实现无缝滚动、分享到侧边栏实例代码

更新时间：2016年04月06日 11:58:11 投稿：mrr

本文给通过js代码实现无缝滚动，侧边栏效果，在项目中经常会遇到，下面小编把代码整理分享到脚本之家平台，供大家参考

废话不多说，直接给大家贴代码了，代码解决一起问题！

下面一段代码给大家介绍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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px;
padding:0px;}
#div1{width:830px; height:166px; margin:50px auto;
position:relative;
background:white;
overflow:hidden;}
#div1 ul li{float:left; width:174px; height:166px; list-style:none;
}
ul{position:absolute;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=3
oUl.innerHTML=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=-3;
};
document.getElementsByTagName('a')[1].onclick=function(){
speed=3;
};
};
</script>
</head>
<body>
<a href="javascipt:;">向左走</a>
<a href="javascipt:;">向右走</a>
<div id="div1">
<ul>
<li><img src="images/b01.jpg" /></li>
<li><img src="images/b02.jpg" /></li>
<li><img src="images/b03.jpg" /></li>
<li><img src="images/b04.jpg" /></li>
<li><img src="images/b05.jpg" /></li>
</ul>
</div>
</body>
</html>

分享到侧边栏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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{width:100px; height:150px; background:#0F0; position:absolute; left:-100px;}
#div1 span{position:absolute; width:20px; height:60px; line-height:20px; background:#00F; right:-20px; top:50px;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout =function(){
startMove(-10,-100);
}
}
var timer=null;
function startMove(speed,locall){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==locall){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>

以上所述是小编给大家介绍的JavaScript中实现无缝滚动、分享到侧边栏实例代码，代码简单易懂，有疑问欢迎给我留言，小编及时给您答复！

您可能感兴趣的文章:

我所理解的JavaScript中的this指向
这篇文章主要介绍了JavaScript中this指向的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-09-09
ES6解构赋值的功能与用途实例分析
这篇文章主要介绍了ES6解构赋值的功能与用途,结合实例形式分析了ES6结构赋值针对函数参数、赋值、json等相关操作使用技巧,需要的朋友可以参考下
2017-10-10
JavaScript Event学习第八章事件的顺序
在第一章中我提到一个初次看起来可能不是那么好理解的是一个问题：“如果一个元素和他的父元素对于同样的事件都有事件处理程序，那么哪个会首先执行呢？”毫无疑问，看是什么浏览器。
2010-02-02
JS获得多个同name 的input输入框的值的实现方法
这篇文章主要介绍了基于JS代码实现input密码输入框输入密码变黑点密文以及JS获得多个同name 的input输入框的值的实现方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-01-01
JS获取字符对应的ASCII码实例
下面小编就为大家带来一篇JS获取字符对应的ASCII码实例。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
js实现定时进度条完成后切换图片
这篇文章主要介绍了js实现定时进度条,进度100%以后可以切换图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
详解JavaScript的内存空间、赋值和深浅拷贝
这篇文章主要介绍了JavaScript的内存空间、赋值和深浅拷贝，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
js鼠标移动时禁止选中文字
本文主要介绍了js鼠标移动时禁止选中文字的方法，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
微信小程序控制view隐藏显示的5种方法汇总
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面这篇文章主要给大家介绍了关于微信小程序控制view隐藏显示的5种方法,需要的朋友可以参考下
2022-04-04
JavaScript 数据结构之散列表的创建(2)
这篇文章主要介绍了 JavaScript 数据结构之散列表的创建，主要看如何处理散列值冲突的问题，并实现更完美的散列表。下文详细介绍需要的小伙伴可以参考一下
2022-04-04