공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

자바스크립트 롤링배너

serpiko 2013. 11. 27. 12:11

   자바스크립트 롤링배너

 

롤링배너 누가 질문하길래 예전에 공부할때 만들었던(회사 선임님이 as->js로 마이그레이션 으로 주신) 배너에 


회전 배열과 뎁스 그리고 타이머를 추가해서 올려보았다.


 

원본URL : http://serpiko.meximas.com/javascript/


소스다운로드 : http://serpiko.meximas.com/javascript/gallery.zip

 

소스보기)

<!DOCTYPE html>
<html>
	<head>
		<title>serpiko rolling</title>
		<style>
			body {margin: 0;}
			 .containerClass {position:absolute;overflow:hidden;width:550px;height:150px;}
			 .absolute {position:absolute;}
			 .bgColor {background-color:#ff0000}
		</style>
	</head>
	
	<!------------------------ html ------------------------>
	<body>
		<div id="container">
			<div id="imgContainer" class="containerClass">
				<img id="image0" src="image0.jpg"/>
				<img id="image1" src="image1.jpg"/>
				<img id="image2" src="image2.jpg"/>
			</div>
		</div>
	
		<div id="nextBtn">next</div>
		<div id="prevBtn">prev</div>
	
	<!------------------------ javascript ------------------------>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="./Timer.js"></script>
	<script>
		$(document).ready(function(){
			var rotation = new Rotation();
				rotation.init();
		});
		
		function Rotation(){
			//console.log("super");

			this.name = "RotationClass";
			this.container = $("#container");
			this._timer = 2000;
			this._total = 3;
			this._speed = 300;
			this._xPos = [0, 170, 350];
			this._yPos = [50, 0, 50];
			this._depth = [1, 3, 2];
			window.rotation = this;
		}
		
		Rotation.prototype.init = function(){
			this.build();
		}
		
		Rotation.prototype.build = function(){
			var _this = this;
			var i = 0;
			var len = this._total;

			for(i=0; i<len; ++i){
				var img = $("#image" +i);
					img.attr({index:i});
					img.css({"position":"absolute", "left":this._xPos[i], "top":this._yPos[i]});
					img.width(200);
					img.height(100);
			}
		
			this._start();
		}
		
		Rotation.prototype.next = function(){
			var arrxPop = this._xPos.pop();
			var arryPop = this._yPos.pop();
			var arrdPop = this._depth.pop();
			this._xPos.unshift(arrxPop);
			this._yPos.unshift(arryPop);
			this._depth.unshift(arrdPop);
			this._animate();
		}
		
		Rotation.prototype.prev = function(){
			var arrxShift = this._xPos.shift();
			var arryShift = this._yPos.shift();
			var arrdShift = this._depth.shift();
			this._xPos.push(arrxShift);
			this._yPos.push(arryShift);
			this._depth.push(arrdShift);
			this._animate();
		}

		Rotation.prototype._animate = function(){
			var _this = this;
			var i = 0;
			var len = this._total;

			for(i=0; i<len; ++i){
				var myImg = $("#image" +i);
				myImg.css({"z-index":this._depth[i]});
				myImg.stop().animate({"top":this._yPos[i], "left":this._xPos[i]}, this._speed);
			}
		}
		
		Rotation.prototype._stop = function (){
				$(this.container).stopTime();
		};

		Rotation.prototype._start = function (){
				var _this = this;
				$(this.container).everyTime(this._timer, function(i) { 
					_this.next();
				}, 999);
		};

		
		
		Rotation.prototype._mouseover = function (){
				
				var _this = window.rotation;
					_this._stop();
			};

		Rotation.prototype._mouseout = function (){
				var _this = window.rotation;
					_this._start();
			};

		var next = $("#nextBtn");
			next.css({ "left":325, "top":200, "cursor":"pointer", color:"white"});
			next.addClass("absolute").addClass("bgColor").width(50).height(50);
			next.mouseover(function(){rotation._mouseover();});
			next.mouseout(function(){rotation._mouseout();});
			next.mousedown(function(){
				
				rotation.next();
			});
			
		
		var prev = $("#prevBtn");
			prev.css({ "left":150, "top":200, "cursor":"pointer", color:"white"});
			prev.addClass("absolute").addClass("bgColor").width(50).height(50);
			prev.mouseover(function(){rotation._mouseover();});
			prev.mouseout(function(){rotation._mouseout();});
			prev.mousedown(function(){
				
				rotation.prev();
			});

	</script>
	</body>
	
</html>


저작자표시 비영리 변경금지 (새창열림)

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

length - Element 갯수 반환  (0) 2014.01.06
on() - selectstart, dragstart 로 마우스 드래그방지  (2) 2014.01.06
제이쿼리 반복실행  (0) 2013.11.06
jQuery 빠른 처리를 위한 CSS 셀렉터 사용팁  (0) 2013.10.24
제이쿼리 드래그앤드롭  (0) 2013.10.14
댓글