자작 제이쿼리 슬라이더 입니다.

노드js·자바스크립트

by 김일국 2014. 12. 6. 15:39

보통은 nivo 슬라이더를 사용하는데, 간혹 프렘임웍이나, 솔루션을 겹쳐서 사용할 경우 슬라이더가 작동하지 않는 경우가 있습니다. 물론 일반적으로 제이쿼리 알리아스를 사용하는 방법이 있지만,

:구형 솔루션에 최신 제이쿼리 사용예)

var $newjQuery = jQuery.noConflict();

$newjQuery(function () {

$newjQuery("#slidepage #n0").css({"background-color":"pink"});

});

위와 같이 $newjQuery 라는 새로운 alias 를 지정하여 $ 대신 $newjQuery 를 사용하면 됩니다.

그래도 작동하지 않는 경우 제가 사용하는 자작 슬라이더 입니다.

<!DOCTYPE html>

<html>

<head>

<style>

.wrap { width: 100%; }

.kslidebody {margin:0 auto;position:relative;margin-top:20px;

width:714px;height:322px;overflow:hidden;background-color:transparent;}

.kslidebody .kslide > .overlay {

position: absolute;

width: 100%;

height: 100px;

overflow: hidden;

margin: 0px 10px 0px 10px;

opacity: .8;

bottom: 0;

font-size: 0.9em;

}

.action {margin:0 auto;position:relative;margin-top:-200px;width:814px;}

.prev {position:absolute;width:44px;height:44px;margin-left:0px; z-index:1550; background-image:url(icon_prev.png); background-repeat:no-repeat; cursor:pointer;}

.next {position:absolute;width:44px;height:44px;margin-left:750px; z-index:1550; background-image:url(icon_next.png); background-repeat:no-repeat;cursor:pointer; }

.slidepage {margin:0 auto;position:relative;margin-top:250px;width:814px;text-align:center;}

.slidepage > span{margin-right:5px;}

</style>

</head>

<body>

</div>

<p>테스트 이벤트1 내용 입력 입니다.

<br />퀸스케어 이벤트 첫번째

</p>

</div>

</div>

<p>테스트 이벤트2 내용 입력 입니다.

<br />퀸스케어 이벤트 두번째

</p>

</div>

</div>

</div>

$(function () {

var image=0; //롤링할 개체의 개수

var now=0; //현재 선택된 개체

var second=3; //롤링시간텀

var kslider; //반복할 개체묶음

var number=0; //페이징에서 사용할 변수

// 초기화

image=$("#kslidebody .kslide").size();

for(n=0;n<image;n++){

$("#slidepage").append('<span class="slidenumber" id="n'+ n +'" style="display:inline-block;width:20px;height:20px;background-color:skyblue;cursor:pointer;"></span>');

}

$("#slidepage #n0").css({"background-color":"pink"});

$("#kslidebody .kslide").each(function (i) { if($(this).css('display')!='none'){ now=i; } });

function startShow() {

timing=second*1000;

kslider=setInterval(function () {

now++;

if(now>=image) now=0;

$("#kslidebody .kslide").each(function (i) { if(i==now){ $(this).show();$("#slidepage #n"+i+"").css({"background-color":"pink"}); } else { $(this).hide(); $("#slidepage #n"+i+"").css({"background-color":"skyblue"});} });

}, timing);

}

function endShow() { clearInterval(kslider); }

// 자동 시작

startShow();

// 기능 부여 페이징링크

$(".slidenumber").click(function() {

//alert(this.id);//디버그

number = (this.id).replace(/[^0-9]/g,'');

now=number;

$("#kslidebody .kslide").each(function (i) { if(i==now){ $(this).show();$("#slidepage #n"+i+"").css({"background-color":"pink"}); } else { $(this).hide(); $("#slidepage #n"+i+"").css({"background-color":"skyblue"});} });

});

// 기능 부여 좌우 액션

$("#next").click(function() {

now++;

if(now>=image) now=0;

$("#kslidebody .kslide").each(function (i) { if(i==now){ $(this).show();$("#slidepage #n"+i+"").css({"background-color":"pink"}); } else { $(this).hide(); $("#slidepage #n"+i+"").css({"background-color":"skyblue"});} });

});

$("#prev").click(function() {

now--;

if(now<0) now=image-1;

$("#kslidebody .kslide").each(function (i) { if(i==now){ $(this).show();$("#slidepage #n"+i+"").css({"background-color":"pink"}); } else { $(this).hide(); $("#slidepage #n"+i+"").css({"background-color":"skyblue"});} });

});

// 기능 부여 롤오버시 멈추기

$('#kslidebody, #action, #slidepage').hover(

function() {

endShow();

},

function() {

startShow();

});

</script>

</body>

</html>

'노드js·자바스크립트' 카테고리의 다른 글

탭메뉴로 페이지 내용 꾸미기 (0)	2014.12.16
userAgent로 접속한 기기가 모바일인지 확인 하는 방법 (0)	2014.12.15
자바스크립트로 IE브라우저 버전 확인하는 방법(Trident값사용) (0)	2014.11.27
마우스 롤오버 팝업레이어 만들기 (0)	2014.06.12
제이쿼리로 입력폼의 빈값 체크하는 함수 입니다. (0)	2014.05.16