슬라이드 쇼의 반대 방향을 늦추려면 어떻게해야합니까?

Question

나는 다음과 같은 플러그인을 사용하고 있습니다 : 마지막 슬라이드는 스크립트가 다시 첫 번째 슬라이드로 이동 넘으면

http://unslider.com/

문제의 파일이 unslider.js

입니다하지만 그것은 매우 빠르게 수행 . 저는 JS에 익숙하지 않아 첫 번째 슬라이드로 돌아갈 때 어떻게 스크립트를 느리게 할 수 있는지 확신하지 못합니다. 그래서 그것을 표시 할 때 1 - 2 - 3 - 4로 바뀌지 만 반대로 4 - 3 - 2 - 1에서 빠르면 어떤 생각입니까?

이 내가 함께 놀았 던 옵션하지만 행운은 다음과 같습니다

// Set some options 
    _.o = { 
     speed: 800, // animation speed, false for no transition (integer or boolean) 
     delay: 5000, // delay between slides, false for no autoplay (integer or boolean) 
     init: 0,  // init delay, false for no delay (integer or boolean) 
     pause: !f, // pause on hover (boolean) 
     loop: !f,  // infinitely looping (boolean) 
     keys: true,  // keyboard shortcuts (boolean) 
     dots: true,  // display ••••o• pagination (boolean) 
     arrows: true, // display prev/next arrows (boolean) 
     prev: '', // text or html inside prev button (string) 
     next: '', // same as for prev option 
     fluid: true,  // is it a percentage width? (boolean) 
     complete: f, // invoke after animation (function with argument) 
     items: '>ul', // slides container selector 
     item: '>li' // slidable items selector 
    }; 

는 그리고 나는이 할 것을 관련하지만 확실하지 않은 것 같아요 :

 // To slide or not to slide 
     if ((!target.length || index < 0) && o.loop == f) return; 

     // Check if it's out of bounds 
     if (!target.length) index = 0; 
     if (index < 0) index = li.length - 1; 
     target = li.eq(index); 

     var speed = callback ? 5 : o.speed | 0, 
      obj = {height: target.outerHeight()}; 

     if (!ul.queue('fx').length) { 
      // Handle those pesky dots 
      el.find('.dot').eq(index).addClass('active').siblings().removeClass('active'); 

      el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) { 
       _.i = index; 

       $.isFunction(o.complete) && !callback && o.complete(el); 
      }); 
     }; 
    }; 

을 위 라인에서 나는이 하나 놀고 : var 속도 = 콜백? 5 : o.speed | 0,

5 대신 다른 번호를 추가하려고 시도했지만 트릭을 수행하지 않았습니다.

알려 주시기 바랍니다. 감사! 여기

http://jsfiddle.net/Hive7/agG2b/

내가 사용하는 JQuery와입니다 : 내가 만든 비록 여기

Answer 1

가 하나 부울 var에 추가 범위를 벗어 그리고 키우면 사실 다음이

// Check if it's out of bounds 
    var reversespeed=false;//default to false 
    if (!target.length){ 
     index = 0; 
     reversespeed=true;//go to first li 
    } 
    if (index < 0){ 
     index = li.length - 1; 
     reversespeed=true;//go to last li 
    } 
    target = li.eq(index); 

    var speed = callback ? 5 : o.speed | 0, 
     obj = {height: target.outerHeight()}; 
    if(reversespeed){ 
     speed=50000;//add new speed for reverse 
    } 
    if (!ul.queue('fx').length) { 
     // Handle those pesky dots 
     el.find('.dot').eq(index).addClass('active').siblings().removeClass('active'); 

     el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) { 
      _.i = index; 

      $.isFunction(o.complete) && !callback && o.complete(el); 
     }); 
    };  

http://jsfiddle.net/cqRFK/
UPDATE와 같은 속도 값을 변경하는 경우
갈 새로운 속도 값 때에 만 설정하려고 할 수 있습니다 이 범위를 벗어나면 즉시 다시는 이전의 슬라이드를 표시하지 않고 0으로 속도를 변경

// Check if it's out of bounds 
    var reversespeed=false;//default to false 
    if (!target.length){ 
     index = 0; 
     reversespeed=true;//go to first li 
    } 
    if (index < 0){ 
     index = li.length - 1; 
     reversespeed=true;//go to last li 
    } 
    target = li.eq(index); 

    var speed = callback ? 5 : o.speed | 0, 
     obj = {height: target.outerHeight()}; 
    if(reversespeed){ 
     speed=0; 
    } 
    if (!ul.queue('fx').length) { 
     // Handle those pesky dots 
     el.find('.dot').eq(index).addClass('active').siblings().removeClass('active'); 

     el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) { 
      _.i = index; 

      $.isFunction(o.complete) && !callback && o.complete(el); 
     }); 
    }; 

http://jsfiddle.net/cqRFK/1
스 와이프 이벤트에 대한 515,는 jquery.event.swipe.js을 포함

if($.event.special.swipe) { 
this.el.on('swipeleft', _.prev).on('swiperight', _.next); 
} 

Answer 2

나는 처음부터 자신을 작성하는 것이 좋습니다

$(document).ready(function() { 
    $(".slide_button_left").click(function() { 
     if ($("li.slideshow1").css("margin-left") === "-1010px") { 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_1").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-1515px") { 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_2").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-2020px") { 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_3").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-505px") { 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_4").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-1010px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-505px" 
      }, 300); 

     } 
     if ($("li.slideshow1").css("margin-left") === "-1515px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1010px" 
      }, 300); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-2020px") { 
      $("li.slideshow").css("margin-left") 
      $("li.slideshow1").animate({ 
       'margin-left': "-1515px" 
      }, 300); 
     } 
         if ($("li.slideshow1").css("margin-left") === "-505px") { 
             $("li.slideshow1").animate({ 
       'margin-left': "5px" 
      }, 300, function(){ 
             $("li.slideshow1").stop().animate('margin-left', "5px"); 
             if($("li.slideshow1").css("margin-left") === "5px"){ 
                 $("li.slideshow1").css("margin-left", "-2020px") 
                 } 
            }); 
     } 

    }); 

    $(".slide_button_right").click(function() { 
     if ($("li.slideshow1").css("margin-left") === "-1010px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1515px" 
      }, 300); 
             if($("li.slideshow1").css("margin-left") === "-1010px"){ 
             $("a#slide_buttons").css("background", "none"); 
             $("a.slidebutton_1").css("background", "none"); 
             $("a.slidebutton_3").css("background", "red"); 
             } 
     } 
     if ($("li.slideshow1").css("margin-left") === "-1515px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-2020px" 
      }, 300); 
             if($("li.slideshow1").css("margin-left") === "-1515px"){ 
             $("a#slide_buttons").css("background", "none"); 
             $("a.slidebutton_1").css("background", "none"); 
             $("a.slidebutton_4").css("background", "red"); 
             } 
     } 

     if ($("li.slideshow1").css("margin-left") === "-505px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1010px" 
      }, 300); 
             if($("li.slideshow1").css("margin-left") === "-505px"){ 
             $("a#slide_buttons").css("background", "none"); 
             $("a.slidebutton_1").css("background", "none"); 
             $("a.slidebutton_2").css("background", "red"); 
             } 
     } 
         if ($("li.slideshow1").css("margin-left") === "-2020px") { 
      if($("li.slideshow1").css("margin-left") === "-2020px"){ 
             $("a#slide_buttons").css("background", "none"); 
             $("a.slidebutton_1").css("background", "red"); 
             } 
             $("li.slideshow1").animate({ 
       'margin-left': "-2520px" 
      }, 300, function(){ 
             $("li.slideshow1").stop().animate('margin-left', "-2520px"); 
             if($("li.slideshow1").css("margin-left") === "-2520px"){ 
                 $("li.slideshow1").css("margin-left", "-505px") 
                 } 
            }); 
     } 
    }); 
    $("a.slidebutton_1").click(function() { 
     if ($("li.slideshow1").css("margin-left") === "-1010px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-505px" 
      }, 300); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_1").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-1515px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-505px" 
      }, 380); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_1").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-2020px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-505px" 
      }, 460); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_1").css("background", "red"); 
     } 
    }); 
    $("a.slidebutton_2").click(function() { 
     if ($("li.slideshow1").css("margin-left") === "-505px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1010px" 
      }, 300); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_2").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-1515px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1010px" 
      }, 300); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_2").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-2020px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1010px" 
      }, 380); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_2").css("background", "red"); 
     } 
    }); 
    $("a.slidebutton_3").click(function() { 
     if ($("li.slideshow1").css("margin-left") === "-505px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1515px" 
      }, 380); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_3").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-1010px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1515px" 
      }, 300); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_3").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-2020px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-1515px" 
      }, 300); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_3").css("background", "red"); 
     } 
    }); 
    $("a.slidebutton_4").click(function() { 
     if ($("li.slideshow1").css("margin-left") === "-505px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-2020px" 
      }, 460); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_4").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-1010px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-2020px" 
      }, 380); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_4").css("background", "red"); 
     } 
     if ($("li.slideshow1").css("margin-left") === "-1515px") { 
      $("li.slideshow1").animate({ 
       'margin-left': "-2020px" 
      }, 300); 
      $("a#slide_buttons").css("background", "none"); 
      $("a.slidebutton_1").css("background", "none"); 
      $("a.slidebutton_4").css("background", "red"); 
     } 
    }); 
    $(".slide_button_right").mouseover(function() { 
     $("a.slide_button_right").css("background-color", "#000"); 
     $("a.slide_button_right").css("background-size", "60px 54px"); 
     $("a.slide_button_right").css("background-position", "-30px 0px"); 
    }); 
    $(".slide_button_right").mouseout(function() { 
     $("a.slide_button_right").css("background-color", "#fff"); 
     $("a.slide_button_right").css("background-size", "60px 54px"); 
     $("a.slide_button_right").css("background-position", "0px 0px"); 
    }); 
     $(".slide_button_left").mouseover(function() { 
     $("a.slide_button_left").css("background-color", "#000"); 
     $("a.slide_button_left").css("background-size", "60px 54px"); 
     $("a.slide_button_left").css("background-position", "-30px 0px"); 
    }); 
    $(".slide_button_left").mouseout(function() { 
     $("a.slide_button_left").css("background-color", "#fff"); 
     $("a.slide_button_left").css("background-size", "60px 54px"); 
     $("a.slide_button_left").css("background-position", "0px 0px"); 
    }); 
}); 

이 추가 :

<script> 
if($('ul').css('left') === '300%') { 
$('ul').animate({'left' : '0%'}, 5000) 
} 
</script> 

시간을 변경하려면 5000 번호를 원하는 번호로 변경하십시오.