Question

你好我有一个jquery插件，我想以特定的间隔运行，我遇到的问题它只运行一次然后停止但是如果我用一个简单的alert（）交换调用的函数然后它运行正常，

非常感谢任何帮助。

由于

大卫

(function ($) {
$.fn.gtSlider = function (options) {

    /*****Defualt options****/
    var settings = $.extend({
        slideInterval: 5000,
        slideSpeed: 10000,
        activeSlideClass: "active"
    }, options);


    return this.each(function () {

        /*****Set repsonsive widths / heights ****/

        /*Slider*/
        var slider = $(this);
        /*Slider parent*/
        var parent = $(slider).parent();
        /*Slides*/
        var slide = $(parent).find("li");
        /*Slider outter height*/
        var sliderHeight = $(parent).outerHeight();
        /*Slider outter width*/
        var sliderWidth = $(parent).outerWidth();
        /*Count slides with */
        var slideCount = $(slide).length;
        /*gtSlider width*/
        slider.width(sliderWidth * slideCount);
        /*Set slider height based on parent*/
        slider.height(sliderHeight);
        /*Set slider width based on parent*/
        slide.width(sliderWidth);

        //Set active slide to 1 to match slide count
        var activeSlideIndex = slide.index();

        function showNextSlide() {                
            /*Left slide animation*/
            slider.animate({
               right: sliderWidth
            }, settings.slideSpeed, function () {
            });
        }


        setInterval(function () {
            showNextSlide()
        }, settings.slideInterval);

    });
};
}(jQuery));



$(document).ready(function () {
$(".gtslider").gtSlider({
    slideInterval: 2000,
    slideSpeed: 1000,
    activeSlideClass: "active"
});
}); 




<div class="container">
    <div class="gtslider-wrapper">
        <ul class="gtslider">
            <li>

            </li>
            <li>

            </li>
            <li>

            </li>
        </ul>
        <div style="clear:both"></div>
    </div>
</div>



<style>
.container{margin:0px auto;max-width:900px;width:100%}
.gtslider-wrapper{overflow:hidden;width:100%;padding-   bottom:40%;height:0px;display:inline-block;}
.gtslider{position:relative;width:100%;height:auto;margin:0;text-     align:center;padding:0;overflow:hidden}
.gtslider li{width:100%;list-style:none;text-align:center;float:left}
.gtslider li *{margin:0px auto}
.gtslider li img{max-width:100%;height:auto;display:block}
</style>

Answer 1

您的代码中几乎没有问题。您必须递增右侧属性，并且必须在显示所有幻灯片时重置动画。这是固定的：

 function showNextSlide() {                
            /*Left slide animation*/

            slider.animate({
               right:'+='+sliderWidth
            }, settings.slideSpeed, function () {

            if($(slider).css('right')==$(slider).css('width'))
           $(slider).css('right','0')
            });
        }

检查代码段：

(function ($) {
$.fn.gtSlider = function (options) {

    /*****Defualt options****/
    var settings = $.extend({
        slideInterval: 5000,
        slideSpeed: 10000,
        activeSlideClass: "active"
    }, options);


    return this.each(function () {

        /*****Set repsonsive widths / heights ****/

        /*Slider*/
        var slider = $(this);
        /*Slider parent*/
        var parent = $(slider).parent();
        /*Slides*/
        var slide = $(parent).find("li");
        /*Slider outter height*/
        var sliderHeight = $(parent).outerHeight();
        /*Slider outter width*/
        var sliderWidth = $(parent).outerWidth();
        /*Count slides with */
        var slideCount = $(slide).length;
        /*gtSlider width*/
        slider.width(sliderWidth * slideCount);
        /*Set slider height based on parent*/
        slider.height(sliderHeight);
        /*Set slider width based on parent*/
       slide.width(sliderWidth);

        //Set active slide to 1 to match slide count
        var activeSlideIndex = slide.index();
        
     

        function showNextSlide() {                
            /*Left slide animation*/
          
            slider.animate({
               right:'+='+sliderWidth
            }, settings.slideSpeed, function () {
          
            if($(slider).css('right')==$(slider).css('width'))
           $(slider).css('right','0')
            });
        }


        setInterval(function () {
       
            showNextSlide()
        }, settings.slideInterval);

    });
};
}(jQuery));


$(".gtslider").gtSlider({
    slideInterval: 2000,
    slideSpeed: 1000,
    activeSlideClass: "active"
});

.container{margin:0px auto;max-width:900px;width:100%}
.gtslider-wrapper{overflow:hidden;width:100%;padding-bottom:40%;height:0px;display:inline-block;}
.gtslider{position:relative;width:100%;height:auto;margin:0;text-align:center;padding:0;overflow:hidden}
.gtslider li{width:100%;list-style:none;text-align:center;float:left}
.gtslider li *{margin:0px auto}
.gtslider li img{max-width:100%;height:auto;display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="gtslider-wrapper">
        <ul class="gtslider">
            <li>
11111111111111111
            </li>
            <li>
222222222222222222222222222
            </li>
            <li>
33333333333333333333333333333333333333333333
            </li>
        </ul>
        <div style="clear:both"></div>
    </div>
</div>

P.S。我想你打算将活动类添加到活动幻灯片中（你当前的活动幻灯片var没有做它应该做的事情），但是，我想你会想出来......

setinerval仅在调用函数时运行一次

1 个答案: