[HTML, Jquery] 롤링 이미지, 슬라이드 소스

 

테스트 jquery 버전 jquery-1.9.1.min.js

 

기본적으로 fade 이펙트로 적용되어있으며, 이미지 페이딩 이벤트와, 버튼이 활성화 되는 형태입니다.

 

 

 

- html -

<ul class="represen">
  <li id="mainVisual1" style="display:block;"><a href="/board/event">
  <img src="/images/main_slide01.png" alt="울쎄라더블로"  /></a></li>
  <li id="mainVisual2" style="display:none;"><a href="/board/event">
  <img src="/images/main_slide02.jpg"  alt="쁘띠성형"  /></a></li>
  <li id="mainVisual3" style="display:none;"><a href="/board/event">
  <img src="/images/main_slide03.jpg"  alt="바디라인"  /></a></li>
  <li id="mainVisual4" style="display:none;"><a href="/board/event">
  <img src="/images/main_slide04.jpg" alt="동안얼굴성형"  /></a></li>
  <li id="mainVisual5" style="display:none;"><a href="/board/event">
  <img src="/images/main_slide05.jpg" alt="가슴성형"  /></a></li>
  <li id="mainVisual6" style="display:none;"><a href="/board/event">
  <img src="/images/main_slide06.png" alt="제모"  /></a></li>
</ul>
<ul class="pagination" style="margin-left:-584px;">
  <li id = "mainVisualBtn1" class="on"><a href="#rolling" onClick="main_visual('1');">울쎄라&더블로</a></li>
  <li id = "mainVisualBtn2" ><a href="#rolling" onClick="main_visual('2');">페이스 쁘띠성형</a></li>
  <li id = "mainVisualBtn3"><a href="#rolling" onClick="main_visual('3');">핫! 바디라인</a></li>
  <li id = "mainVisualBtn4"><a href="#rolling" onClick="main_visual('4');">동안얼굴 성형</a></li>
  <li id = "mainVisualBtn5"><a href="#rolling" onClick="main_visual('5');">앨리스 가슴성형</a></li>
  <li id = "mainVisualBtn6"><a href="#rolling" onClick="main_visual('6');">아포지 레이저제모</a></li>
</ul>

 

 

 

- js -

//초기값 선언
var idx = "1";
var prev_idx = "1";
var totS = 6;
var dtime = 6000;
var flag = true;

//메인 슬라이드 컨트롤
function main_visual(no) {
	// 선택된 항목 표시
	$("#mainVisual"+prev_idx).fadeOut("slow", function(){
		$("#mainVisual"+no).fadeIn("slow");
	})
		

	// 버튼 설정
	for(i=1;i<=totS;i++) {
		if(no==i) {
			$('#mainVisualBtn' + i).addClass("on");
		}else{
			$('#mainVisualBtn' + i).removeClass("on");
		}
	}
	idx=no;
	prev_idx=no;

	clearInterval(timer);

	flag = false;
	timer = setInterval(call, dtime);
}

//호출 idx관리
function call()
{
	if(idx==totS){
		idx = 1;
	}else{
		idx++;
	}
	main_visual(idx);
}

//페이지 로딩완료시 슬라이드 호출
$(document).ready(function(){
	timer = setInterval(call, dtime);
});

 

 

 

/* 예제 style */
div.rolling {position:relative; height:674px; overflow:hidden; min-width:1356px;} 
div.rolling ul.represen {position:absolute;width:100%;  }/*min-width:1100px;*/
div.rolling ul.represen li {display: none; height: 674px; left: 50%; margin: 0 auto 0 -952px; overflow: hidden; position: relative; } 
div.rolling ul.pagination {overflow:hidden; position:absolute; bottom:0px; left:50%; margin-left:-400px; z-index:9999;}
div.rolling ul.pagination li:first-child {padding-left:0; }
div.rolling ul.pagination li {float:left; padding-left:1px; }
div.rolling ul.pagination li a {display:inline-block; width:196px; padding: 10px 0; font-size:14px; color:#fff; text-align:center; background:#646262; text-decoration:none; }