[jQuery] image slider

이것역시 지인의 요청으로 찾아보았습니다.

 jquery-ui를 이용한 이미지 슬라이드입니다.

(정말 jQuery로 못하는게 없는것 같습니다.)

<script type="text/javascript" src="js/jquery.min.js"></script>

 <script type='text/javascript' src="js/jquery-ui.js"></script>

// <!-- Product Image Slider  Jquery Script -->
var sliderInterval=false;
function slideShow() {
    var displayToggled = false;
    var current1 = $('.slide:visible');
    var nextSlide = current1.next('.slide');
    var hideoptions = {
        "direction": "right",
        "mode": "hide"
    };
    var showoptions = {
        "direction": "left",
        "mode": "show"
    };
    if (current1.is(':last-child')) {
        current1.effect("slide", hideoptions, 1000);
        $("#firstSlide").effect("slide", showoptions, 1000);
    }
    else {
        current1.effect("slide", hideoptions, 1000);
        nextSlide.effect("slide", showoptions, 1000);
    }
};
function stopShow() {
 clearInterval(sliderInterval);
}
function playShow() {
 sliderInterval=setInterval(slideShow, 2500);
}
sliderInterval=setInterval(slideShow, 2500);
slideShow();
// <!-- Product Image Slider  Jquery Script -->

          <div id="slides" onmouseover="stopShow()" onmouseout="playShow()">
              <div class="slides_container">
               <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="100" height="100" alt="Slide 1" class="slide"  id="firstSlide">
               <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="100" height="100" alt="Slide 2" class="slide" style="display:none;">
               <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="100" height="100" alt="Slide 3" class="slide" style="display:none;">
               <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="100" height="100" alt="Slide 4" class="slide" style="display:none;">
               <img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="100" height="100" alt="Slide 5" class="slide" style="display:none;">
               <img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="100" height="100" alt="Slide 6" class="slide" style="display:none;">
              </div>
           </div>

출처 : http://slidesjs.com

이것역시 까먹지 않고 남들이 필요할때 도와주기 용으로 작성해 보았습니다.

누군가에게 소중한 TIP이 되길 바라며.

.by rocksea