面向对象无缝滚动

最新推荐文章于 2025-08-10 19:50:19 发布

转载最新推荐文章于 2025-08-10 19:50:19 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5247307.html

文章标签：

#javascript #ViewUI

<style>
			*{
				margin:0;
				padding:0;
			}
			#outer{
				width:800px;
				height:450px;
				overflow:hidden;
				position:relative;
			}
			#inner{
				position:absolute;
				width:4800px;
				overflow:hidden;
			}
			#inner img{
				width:800px;
				height:450px;
				float:left;
			}
			#rightBtn{
				position:absolute;
				left:0;
				top:50%;
				margin-top:-50px;
				background:rgba(0,0,0,0.5);
				width:50px;
				height:100px;
				font-size:40px;
				line-height:100px;
				text-align:center;
				color:white;
			}
			#leftBtn{
				position:absolute;
				right:0;
				top:50%;
				margin-top:-50px;
				background:rgba(0,0,0,0.5);
				width:50px;
				height:100px;
				font-size:40px;
				line-height:100px;
				text-align:center;
				color:white;
			}
		</style>

<div id="outer">
			<div id="inner" style="left:-800px;">
				<img src="img/12.jpg" alt="" />
				<img src="img/1.jpg" alt="" />
				<img src="img/10.jpg" alt="" />
				<img src="img/11.jpg" alt="" />
				<img src="img/12.jpg" alt="" />
				<img src="img/1.jpg"/>
			</div>
			<div id="rightBtn"><</div>
			<div id="leftBtn">></div>
		</div>
		<script type="text/javascript">
			function scroll(obj1,obj2,obj3){
				this.obj1 = obj1;
				this.obj2 = obj2;
				this.obj3 = obj3;
			}
			scroll.prototype.move = function(){	
				this.oLeft = parseInt(this.obj1.style.left);
				var that = this;
				this.obj2.onclick = function(){
					that.scrollLeft();
				}
				this.obj3.onclick = function(){
					that.scrollRight();
				}
			}
			scroll.prototype.scrollLeft = function(){
				var that = this;
				clearInterval(this.time);
				clearTimeout(this.time1);
				this.time = setInterval(movestart,1);
				function movestart(){
					that.oLeft--;
					if(that.oLeft%800==0){
						if(that.oLeft==(-4000)){
							that.oLeft = -800;
						}
						clearInterval(that.time);
						that.time1 = setTimeout(function(){
							that.time = setInterval(movestart,1);
						},1000)
					}
					that.obj1.style.left = that.oLeft + "px";
				}
			}
			scroll.prototype.scrollRight = function(){
				var that = this;
				clearInterval(this.time);
				clearTimeout(this.time1);
				this.time = setInterval(movestart,1);
				function movestart(){
					that.oLeft++;
					if(that.oLeft%800==0){
						if(that.oLeft==0){
							that.oLeft = -3200;
						}
						clearInterval(that.time);
						that.time1 = setTimeout(function(){
							that.time = setInterval(movestart,1);
						},1000)
					}
					that.obj1.style.left = that.oLeft + "px";
				}
			}
			window.onload = function(){
				var inner = document.getElementById("inner");
				var rightBtn = document.getElementById("rightBtn");
				var leftBtn = document.getElementById("leftBtn");
				var scrollnow = new scroll(inner,leftBtn,rightBtn);
				scrollnow.move();
			}
		</script>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5247307.html