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=GBK" />
<title>JS左右无缝滚动（一般方法+面向对象方法）</title>
<style type="text/css">
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
body{background:gray;}
#wrap{width:810px; height:160px;
border:1px solid black;
position:relative;
left:50%;
top:50%;
margin-left:-410px;
margin-top:200px;
background:#fff;
overflow:hidden;}
#wrap ul{margin:0px;
padding:0px;
position:absolute;
top:0px;
left:0px;}
#wrap ul li{ list-style:none; float:left;margin:5px 10px;width:265px;}
#wrap ul li img{ border:1px black solid; padding:10px;}
</style>
<!--script type="text/javascript">window.οnlοad=function(){ //一般方法var wrap=document.getElementById("wrap");var wrap_ul=wrap.getElementsByTagName("ul")[0];var wrap_li=wrap.getElementsByTagName("li");wrap_ul.innerHTML+=wrap_ul.innerHTML;wrap_ul.style.width=(wrap_li[0].offsetWidth+20)*wrap_li.length+"px";Autoscroll=setInterval(scroll,100);function scroll(){wrap_ul.style.left=wrap_ul.offsetLeft-3+"px";  //这里因为ie对offsetLeft的解析不一样，所以ie下必须减大于等于3的数if(wrap_ul.offsetLeft<=-wrap_ul.offsetWidth/2){wrap_ul.style.left="0px";}else if(wrap_ul.offsetLeft>=0){wrap_ul.style.left=-wrap_ul.offsetWidth/2+"px";}}wrap.οnmοuseοver=function(){clearInterval(Autoscroll);}wrap.οnmοuseοut=function(){Autoscroll=setInterval(scroll,100);}}
</script-->
<script type="text/javascript">
function Slide(obj,direction,speed){   //面向对象的方法，可以自由控制方向，speed=>3 ie下可以this.container=document.getElementById(obj);this.content=this.container.getElementsByTagName("ul")[0];this.lis=this.content.getElementsByTagName("li");this.content.innerHTML+=this.content.innerHTML;this.content.style.width=(this.lis[0].offsetWidth+20)*this.lis.length+"px";var that=thisif(direction=="left"){this.speed=-speed}else if(direction=="right"){this.speed=speed}Slide.prototype.scroll=function(){this.content.style.left=this.content.offsetLeft+this.speed+"px";if(this.content.offsetLeft <= -this.content.offsetWidth/2){this.content.style.left ="0px";}else if(this.content.offsetLeft >=0){this.content.style.left = -this.content.offsetWidth/2 + "px";
        }}this.time=setInterval(function(){that.scroll()},100);this.container.onmouseover=function(){clearInterval(that.time);}this.container.onmouseout=function(){that.time=setInterval(function(){that.scroll()},100);}
}
</script>
<script type="text/javascript">
window.onload=function(){new Slide("wrap","left",5)}
</script></head><body>
<div id="wrap"><ul class="clearfix"><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"   /></a></li><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"  /></a></li><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"  /></a></li><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"  /></a></li><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"  /></a></li></ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/afuge/archive/2012/08/17/2644199.html

JS左右无缝滚动（一般方法+面向对象方法）相关推荐

js自下而上无缝滚动
js自下而上无缝滚动的小例子,能兼容ie8 鼠标悬停时可以停止滚动 function scrollup(){ if(box.scrollTop>=l1.offsetHeight){ //滚动条距 ...
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
先上效果图首先呈上效果图,主要是针对图片跑马灯效果(请忽略我的快速播放和录屏图标) 具体实现方式目前我需要展示6张图片,但是为了实现无缝衔接,我的列表放了12张(放2遍图片),这样就不至于在切换时 ...
Swiper.js实现无缝滚动
1. 引入Swiper.js <script src="/static/swiper/swiper-bundle.min.js"></script> 其他获 ...
js水平无缝滚动代码实例详解
本章节分享一段代码实例,它实现了图片无缝水平滚动效果. 这样的功能在实际应用中比较常见,感兴趣的朋友可以做一下参考. 代码如下: <!doctype html> <html> ...
原生js实现无缝滚动
水平方向无缝滚动滚动支持图片,文字原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定 ...
不用js实现无缝滚动---marquee
marquee标签:创建一个滚动的文章字幕,应用于文字.图片.表格基本语法: <marquee>文字.图片代码.Flash动画代码和gif动态小代码</marquee> m ...
css + js实现简单无缝滚动字幕
css + js实现无缝滚动字幕利用js和css就可以很方便的实现一个无缝滚动字幕,使得列表在一个方框里不停滚动目录 css js实现无缝滚动字幕实现思路 html 代码 css 代码 js 代 ...
面向过程方法与面向对象方法的比较
结构化方法是在软件行业得到广泛接受和使用,并一度成为早期占主导地位的软件构造与开发方法.而面向对象方法提出后,当代软件工程的发展面临着从传统的结构化范型到面向对象范型的转变,对象技术作为新范型的核心技 ...
dw按钮图片滚动js_js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInter ...

JS左右无缝滚动（一般方法+面向对象方法）

JS左右无缝滚动（一般方法+面向对象方法）相关推荐

最新文章

热门文章