자바스크립트 슬라이드

by hohoya33

HTML

<div id = 'autoslide'> <!--고정 div-->
 	<div> <!--움직이는 div set 결론은 이걸 움직여야지 하위 디비들이 상위 디비에 보임-->
  	<div><li>haha1</li></div> <!--table-cell로인해 붙어있는 하위 요소들-->
  	<div><li>haha2</li></div>
	<div><li>haha3</li></div>
	<div><li>haha4</li></div>
  	</div>
  </div>
 <p>오토슬라이드</p>

<div id = 'buttonslide'> <!--고정 div-->
 	<div> <!--움직이는 div set 결론은 이걸 움직여야지 하위 디비들이 상위 디비에 보임-->
  	<div><li>haha1</li></div> <!--table-cell로인해 붙어있는 하위 요소들-->
  	<div><li>haha2</li></div>
	<div><li>haha3</li></div>
	<div><li>haha4</li></div>
  	</div>
  </div>
  <p>클릭슬라이드</p>

  <button type='button' onclick='button.bLeft();'>왼쪽 </button>
  <button type='button' onclick='button.bRight();'>오른쪽 </button>
  <br>
  <br>

  <div id = 'touch'> <!--고정 div-->
 	<div> <!--움직이는 div set 결론은 이걸 움직여야지 하위 디비들이 상위 디비에 보임-->
  	<div><li>haha1</li></div> <!--table-cell로인해 붙어있는 하위 요소들-->
  	<div><li>haha2</li></div>
	<div><li>haha3</li></div>
	<div><li>haha4</li></div>
  	</div>
  </div>
  <p>터치&마우스슬라이드</p>

CSS

div div div {
  margin:0;
  padding:0;
  }
  
  li {
  width:100px;
  height:100px;
  background-color: green;
  color:white;
  }

JavaScript

function Banner (id, options) {
	
	
	//옵션매개변수 정의 없으면 기본으로 autoslide는 옵션 씹어먹음.. 	
 	this.options = this.options || {};
 	this.slidingDuration = this.options.slidingDuration || 500; // 슬라이드 완료시간

 	// id매개변수 정의
 	this.id = document.getElementById(id); //id
 	this.children = this.id.children; // id 하위노드
 	this.firstchildren = this.id.children[0]; // id 하위노드 [0]번째 배열
 	this.length = this.firstchildren.children.length; // this.id.children[0].children.length
 	
	// 하위 CSS정의 : 미리 하위노드를 설정후 상위노드에 상속 시킨다.
 	var index = this.length;
 	while (index--) { //검사하고 깍고 실행한다. 0, = false
 	  var child = this.firstchildren.children[index] // 하위노드에 반복적으로 css 설정
 	child.style.display = 'table-cell';
	child.style.zIndex = 4;
	};
	
	 //하위 노드 너비 받기.
	this.width = this.firstchildren.children[0].offsetWidth;
 	this.height = this.firstchildren.children[0].offsetHeight;

	//상위 static CSS정의
 	this.id.style.width = this.width + 'px';
	this.children[0].style.display ='table-cell';
 	this.id.style.overflow = 'hidden';
 	
	this.arr = this.length-1; // 슬라이드 배열 정의
	
} ;

 Banner.prototype = {
    
	array : 0, //클릭 슬라이드 배열 초기화

	touch : function () { // 이벤트핸들러
		this.touchchildren = this.id.children[0];
		this.id.addEventListener('mousedown', pointerStart, false);
		this.id.addEventListener('mousemove', pointerMove, false);
		this.id.addEventListener('mouseup', pointerEnd, false);
		this.id.addEventListener('touchstart', pointerStart, false);
		this.id.addEventListener('touchmove', pointerMove, false);
		this.id.addEventListener('touchend', pointerEnd, false);
		this.id.addEventListener('touchcancel',pointerEnd , false);
		
		var firstX = 0;
		var newX = 0;
		var distance = 0;
		var pushing = false;
		var child = this.id.children[0];
		var width = this.firstchildren.children[0].offsetWidth;
		var length = this.length-1
		var index = 0;

		function pointerStart () {
		var touchX = (event.pageX) ? event.pageX : event.clientX
		var touchY = (event.pageY) ? event.pageY : event.clientY
		firstX = newX =...