이미지 슬라이드

n = 1;

var slide_w = $('#content01 ul#slider li').width();

var slide_cnt = $('#content01 ul#slider li').size();

var sliderOn = 'img/ico_slider_on.png'

var sliderOff = 'img/ico_slider.png'

---

$('a#nextBtn').click(function(){

n++;

if(n==slide_cnt){

$('#content01 ul#slider').css({marginLeft:-slide_w * 1});

n=2

}

$('#content01 ul#slider').stop().animate({marginLeft:-slide_w * n});

// navdot

$('#content01 ul#navdot img').attr({src:sliderOff});

$('#content01 ul#navdot li:eq(' + (n-1) + ') img').attr({src:sliderOn});

if(n==slide_cnt-1){

$('#content01 ul#navdot li:eq(0) img').attr({src:sliderOn});

}

})

---

$('a#prevBtn').click(function(){

n--;

if(n==-1){

$('#content01 ul#slider').css({marginLeft:-slide_w * (slide_cnt-2)});

n=slide_cnt-3;

}

$('#content01 ul#slider').stop().animate({marginLeft:-slide_w * n});

// navdot

$('#content01 ul#navdot img').attr({src:sliderOff});

$('#content01 ul#navdot li:eq(' + (n-1) + ') img').attr({src:sliderOn});

})

---

$('ul#navdot li').click(function(){

       var dot_n = $(this).index() + 1

       $('#function01 #funcContent01 ul#slider').stop().animate({marginLeft:-slide_w * dot_n});

       $('ul#navdot li img').attr('src',sliderOff)

       $('ul#navdot li:eq('+(dot_n-1)+') img').attr('src',sliderOn)

       return false;

    })

---

.current{

    top: -1px;

    left: -1px;

    width: 8px;

    height: 8px;

    border-style: solid;

    border-width: 1px;

    border-color: #08c;

    background-color: transparent;

    cursor: default;

}

.dotnav{

    top: 0;

    left: 0;

    width: 8px;

    height: 8px;

    outline: none;

    position: absolute;

    border-radius: 50%;

    background-color: #999;

    font: 0/0 a;

    color: transparent;

}

---

뭐든지 처음은 어렵기 마련 자꾸 하다보면 나아질 것이다.

기록하고 참고하자.

- navdot 추가 2016.01.15

- navdot 은 꼭 이미지가 아니더라도 css로 충분히 표현가능