Archive / Javascript / Slide

컨텐츠 영역의 height 가 정해져 있는 경우, 컨텐츠 표현을 위해서 scroll 을 이용하는 경우가 있다. 이러한 컨텐츠를 스크롤이 아닌 좌우 슬라이드로 보여주는 효과이다.

slideContent 라는 block 이 페이지의 단위이고 이 단위 갯수 만큼 페이징이 이루어 진다. 버튼을 이미지로 사용하는 경우 javascript 의 isImageBtn 을 true 로 하시고 이미지를 넣으면 되고 dimmed 된 이미지의 파일명은 _off 를 붙이면 된다. 페이지의 디자인은 CSS 를 수정하면 되고 content 의 폭인 contentWidth (컨텐츠간의 여백포함) 를 같이 조절해 주면 된다.

<div class="gallery-container">
	<div class="slideContentContainer">
		<div id="gmnextslide" class="slideContentMover">
			<div class="slideContent">
				<ul>
					<li><a href="../images/event/gallery_2008/cadillac_1.jpg"><img src="../images/event/gallery_2008/cadillac_1_thumb.jpg" alt="1918 Royal Cadillac" /></a></li>
					<li><a href="../images/event/gallery_2008/cadillac_2.jpg"><img src="../images/event/gallery_2008/cadillac_2_thumb.jpg" alt="1918 Royal Cadillac" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_1.jpg"><img src="../images/event/gallery_2008/winstorm_1_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_2.jpg"><img src="../images/event/gallery_2008/winstorm_2_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_3.jpg"><img src="../images/event/gallery_2008/winstorm_3_thumb.jpg" alt="Winstorm" /></a></li>
				</ul>
			</div>
			<div class="slideContent">
				<ul>
					<li><a href="../images/event/gallery_2008/winstorm_4.jpg"><img src="../images/event/gallery_2008/winstorm_4_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_5.jpg"><img src="../images/event/gallery_2008/winstorm_5_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_6.jpg"><img src="../images/event/gallery_2008/winstorm_6_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_7.jpg"><img src="../images/event/gallery_2008/winstorm_7_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_8.jpg"><img src="../images/event/gallery_2008/winstorm_8_thumb.jpg" alt="Winstorm" /></a></li>
				</ul>
			</div>
			<div class="slideContent">
				<ul>
					<li><a href="../images/event/gallery_2008/winstorm_9.jpg"><img src="../images/event/gallery_2008/winstorm_9_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_10.jpg"><img src="../images/event/gallery_2008/winstorm_10_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/winstorm_11.jpg"><img src="../images/event/gallery_2008/winstorm_11_thumb.jpg" alt="Winstorm" /></a></li>
					<li><a href="../images/event/gallery_2008/equinox_1.jpg"><img src="../images/event/gallery_2008/equinox_1_thumb.jpg" alt="Equinox" /></a></li>
					<li><a href="../images/event/gallery_2008/equinox_2.jpg"><img src="../images/event/gallery_2008/equinox_2_thumb.jpg" alt="Equinox" /></a></li>
				</ul>
			</div>
			<div class="slideContent">
				<ul>
					<li><a href="../images/event/gallery_2008/equinox_3.jpg"><img src="../images/event/gallery_2008/equinox_3_thumb.jpg" alt="Equinox" /></a></li>
					<li><a href="../images/event/gallery_2008/equinox_4.jpg"><img src="../images/event/gallery_2008/equinox_4_thumb.jpg" alt="Equinox" /></a></li>
					<li><a href="../images/event/gallery_2008/equinox_5.jpg"><img src="../images/event/gallery_2008/equinox_5_thumb.jpg" alt="Equinox" /></a></li>
					<li><a href="../images/event/gallery_2008/equinox_6.jpg"><img src="../images/event/gallery_2008/equinox_6_thumb.jpg" alt="Equinox" /></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="slideBtnSet">
		<img id="gmnextprev" class="prevbtn" src="../images/event/seoul_2007_gallery_prev.gif" alt="prev">
		<img id="gmnextnext" class="nextbtn" src="../images/event/seoul_2007_gallery_next.gif" alt="next">
	</div>
</div>
<script type="text/javascript">initScrollContent(document.getElementById("gmnextslide"), document.getElementById("gmnextprev"), document.getElementById("gmnextnext"));</script>
div.slideContentContainer {
	position: absolute;
	top: 14px;
	left: 32px;
	overflow: hidden;
	width: 670px;
	height: 71px;
}
div.slideContentContainer div.slideContentMover {
	position: absolute;
}
div.slideContentContainer div.slideContent {
	position: absolute;
	width: 685px;
	overflow: hidden;
}
div.slideContentContainer div.slideContent ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 685px;
	height: 71px;
}
div.slideContentContainer div.slideContent ul li {
	float: left;
	padding: 0 5px;
}
div.slideContentContainer div.slideContent li a img {
	width: 124px;
	/*
	height: 71px;
	*/
}
div.gallery-container *.on {
	cursor: pointer;
}
div.gallery-container *.off {
	cursor: default;
}
div.slideBtnSet img.prevbtn {
	position: absolute;
	top: 43px;
	left: 4px;
}
div.slideBtnSet img.nextbtn {
	position: absolute;
	top: 43px;
	right: 4px;
}
function initScrollContent(container, prevBtn, nextBtn) {
	var currentContentPage = 1;
	var contentElCount = 0;
	var content_x = 0;
	var slideContentTo = 0;
	var contentWidth = 685;
	var isImageBtn = true;
	var cont = container.getElementsByTagName("div");

	for (i=0; i<cont.length; i++) {
		if (cont[i].className == "slideContent") {
			contentElCount++;
			cont[i].style.left = contentWidth * (contentElCount - 1) + "px";
		}
	}

	setSlideBtn();

	function setSlideBtn() {
		if (contentElCount == 1) {
			setPrevBtn("off");
			setNextBtn("off");
		} else if (parseInt(currentContentPage) == 1) {
			setPrevBtn("off");
			setNextBtn("on");
		} else if (parseInt(currentContentPage) == contentElCount) {
			setPrevBtn("on");
			setNextBtn("off");
		} else {
			setPrevBtn("on");
			setNextBtn("on");
		}
	}
	function setPrevBtn(condition) {
		if (condition == "on") {
			prevBtn.onclick = viewPrev;
			if (isImageBtn) prevBtn.src = prevBtn.src.replace("_off.gif", ".gif");
			prevBtn.className = prevBtn.className.replace(" off", "");
			prevBtn.className += " on";
		} else {
			prevBtn.onclick = "";
			if (isImageBtn) prevBtn.src = prevBtn.src.replace(".gif", "_off.gif");
			prevBtn.className = prevBtn.className.replace(" on", "");
			prevBtn.className += " off";
		}
	}
	function setNextBtn(condition) {
		if (condition == "on") {
			nextBtn.onclick = viewNext;
			if (isImageBtn) nextBtn.src = nextBtn.src.replace("_off.gif", ".gif");
			nextBtn.className = nextBtn.className.replace(" off", "");
			nextBtn.className += " on";
		} else {
			nextBtn.onclick = "";
			if (isImageBtn) nextBtn.src = nextBtn.src.replace(".gif", "_off.gif");
			nextBtn.className = nextBtn.className.replace(" on", "");
			nextBtn.className += " off";
		}
	}
	function viewPrev() {
		slideContentTo += contentWidth;
		currentContentPage = parseInt(currentContentPage) - 1;
		setSlideBtn();
		startScroll();
	}
	function viewNext() {
		slideContentTo -= contentWidth;
		currentContentPage = parseInt(currentContentPage) + 1;
		setSlideBtn();
		startScroll();
	}
	function startScroll() {
		setTimeout(
			function slideContent() {
				if (Math.abs(content_x - slideContentTo) > 1) {
					content_x += (slideContentTo - content_x) * .15;
					container.style.left = content_x + "px";
					startScroll();
				} else {
					content_x = slideContentTo;
					container.style.left = content_x + "px";
				}
			}

		, 10);
	}
}
Page last modified on August 08, 2011, at 05:23 PM

Powered by PmWiki