zoukankan      html  css  js  c++  java
  • 面向对象 无缝滚动

    <style>
    			*{
    				margin:0;
    				padding:0;
    			}
    			#outer{
    				800px;
    				height:450px;
    				overflow:hidden;
    				position:relative;
    			}
    			#inner{
    				position:absolute;
    				4800px;
    				overflow:hidden;
    			}
    			#inner img{
    				800px;
    				height:450px;
    				float:left;
    			}
    			#rightBtn{
    				position:absolute;
    				left:0;
    				top:50%;
    				margin-top:-50px;
    				background:rgba(0,0,0,0.5);
    				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);
    				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>
    

      

  • 相关阅读:
    ch_6802 車的放置
    ch_POJ2182 Lost Cows
    ch_4201 楼兰图腾
    luogu_P3368【模板】树状数组 2
    门面
    建造者
    模板方法
    状态
    抽象工厂
    工厂方法
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5247307.html
Copyright © 2011-2022 走看看