Javascript 如何减慢幻灯片放映的反向速度?

Javascript 如何减慢幻灯片放映的反向速度?,javascript,jquery,slider,slideshow,Javascript,Jquery,Slider,Slideshow,我正在使用以下插件: 所讨论的文件是unslider.js 当最后一张幻灯片结束时,脚本返回到第一张幻灯片,但速度非常快。我是JS新手,所以不确定当脚本返回到第一张幻灯片时,如何减慢脚本的速度。所以,当显示它时,它从1-2-3-4开始,但当反转时,它从4-3-2-1快速开始。有什么想法吗 以下是我一直在玩但运气不佳的选项: // Set some options _.o = { speed: 800, // animation speed, false f

我正在使用以下插件:

所讨论的文件是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);
            });
        };
    };
//滑动还是不滑动
如果(!target.length | index<0)和&o.loop==f)返回;
//检查是否超出范围
如果(!target.length)索引=0;
如果(指数<0)指数=li.length-1;
目标=li.eq(指数);
var速度=回调?5:o.speed | 0,
obj={height:target.outerHeight()};
如果(!ul.queue('fx').length){
//处理那些讨厌的点
el.find('.dot').eq(index).addClass('active').sides().removeClass('active');
el.animate(对象,速度)和&ul.animate($.extend({left:'-'+index+'00%'),对象),速度,函数(数据){
_.i=指数;
$.isFunction(o.complete)和&!回调和&&o.complete(el);
});
};
};
在上面的一行中,我试着玩这个:var speed=callback?5:o.speed | 0

我试着用不同的数字来代替5,但没有成功


请告知。谢谢

我建议你自己从头开始写,尽管我在这里做了:

以下是我使用的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>

如果($('ul').css('left')='300%')){
$('ul').animate({'left':'0%},5000)
}

要更改所需的时间,请将5000数字更改为您想要的数字

我建议您从头开始编写自己的数字,尽管我在这里做了:

以下是我使用的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>

如果($('ul').css('left')='300%')){
$('ul').animate({'left':'0%},5000)
}

若要更改所需时间,请将5000数字更改为您想要的数值

仅当添加一个布尔值超出范围时,您可以尝试设置一个新的速度值,如果该值为真,请像这样更改速度值

    //  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);
        });
    };    
关于Unslider.js for

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

您可以尝试设置一个新的速度值,但仅当添加一个布尔值超出范围时,如果该值为真,则可以这样更改速度值

    //  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);
        });
    };    
关于Unslider.js for

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

坦斯克,但我需要使用我现在拥有的。你为什么需要使用那个?坦斯克,但我需要使用我现在拥有的。你为什么需要使用那个?天哪!谢谢有没有可能不慢慢返回,而是立即返回,但不显示上一张幻灯片?您可以更改速度=0,该速度当前设置为500,我需要该速度,但反向时如何将其设置为0?
if(reversespeed){speed=0;}
就像第二个提琴,如果(反向速度){speed=0;},我应该在SSCcript的什么地方添加这个呢?天哪!谢谢有没有可能不慢慢返回,而是立即返回,但不显示上一张幻灯片?您可以更改速度=0,该速度当前设置为500,我需要该速度,但反向时如何将其设置为0?
if(reversespeed){speed=0;}
就像第二个提琴一样,如果(反向速度){speed=0;},我应该在SSCcript中的什么地方添加这个?