Как мне замедлить обратную сторону слайд-шоу?

Я использую следующий плагин:Как мне замедлить обратную сторону слайд-шоу?

Файл в вопросе является 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 speed = callback? 5: o.speed | 0,

Я попытался добавить разные цифры вместо 5, но это не помогло.

Просьба сообщить. Благодаря!

источник

2013-07-16 starbucks

вы можете попробовать установить только новое значение скорости, когда он находится вне границ добавляющих один булево вар, и если это правда, то изменить значение скорости, как этот

// 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
для события салфетки для работы вам необходимо включить jquery.event.swipe.js и изменить

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

на Unslider.js для

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

источник

2013-07-16 18:53:03

OMG! Благодарю. Возможно ли, что вместо того, чтобы медленно возвращаться назад, он возвращается сразу, но без него он показывает предыдущие слайды? – starbucks

вы можете изменить скорость = 0 [http: // jsfiddle.net/cqRFK/1 /] (http://jsfiddle.net/cqRFK/1/) –

, что скорость установлена на 500, которая мне понадобится, но когда в обратном порядке, как я могу сделать это 0? – starbucks

Я предлагаю писать свой собственный с нуля, хотя здесь я сделал:

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

Вот JQuery я использовал:

$(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 на то, что вы хотите

источник

2013-07-16 18:22:27

Thansk, но мне нужно использовать то, что я есть сейчас. – starbucks

Зачем вам это нужно? –

Мои работы отлично –

Как мне замедлить обратную сторону слайд-шоу?

ответ

Смежные вопросы