輪播控件不起作用

Question

看到我的小提琴： https : //jsfiddle.net/1bc8j418/1/

可能是我輸入的代碼錯誤，請修改它我嘗試了不同的嘗試但失敗了。 謝謝您的幫助！

或者你可以在這里看到代碼

我的HTML

<div class="carouselBg">

            <p id="demoSliderFirst" class="textSliders"> 
                Life must be lived forwards, but can only be understood backwards.
            </p>
            <span onclick="prev()">back</span>
            <span onclick="next()">next</span>
        </div>

我的查詢

var demoSlider1 = $('#demoSliderFirst');
var DemoSliderSet1 = [
'Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment',
'What screws us up the most in life is the picture in our head of how it is supposed to be.',
'Life shrinks or expands in proportion to one’s courage.'];
var index1 = 0;

function demoSliderCarousel1(){



    var newDemoSliderSet1 = DemoSliderSet1[index1];

    demoSlider1.fadeOut('400',function(){
        demoSlider1[0].innerHTML = newDemoSliderSet1;
    }).fadeIn('400');


    index1++;

    if(index1 >= DemoSliderSet1.length){
        index1 = 0;
    }

     this.prev = function(){
         if(--this.index1 < 0) this.index = this.DemoSliderSet1.length - 1;
        this.start()
    };

    this.next = function(){
        if(++this.index1 >= this.DemoSliderSet1.length) this.index = 0;
        this.start()
    };

}

setInterval(demoSliderCarousel1,4000);

Answer 1

您在錯誤的范圍內創建了next()和prev()函數。 在demoSliderCarousel1()函數之外創建函數，一切正常。

var demoSlider1 = $('#demoSliderFirst');
var DemoSliderSet1 = [
    'Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment',
    'What screws us up the most in life is the picture in our head of how it is supposed to be.',
    'Life shrinks or expands in proportion to one’s courage.'];
var index1 = 0;

var demoSliderCarousel1 = function() {
    var newDemoSliderSet1 = DemoSliderSet1[index1];

    demoSlider1.fadeOut('400',function(){
        demoSlider1[0].innerHTML = newDemoSliderSet1;
    }).fadeIn('400');


    index1++;

    if(index1 >= DemoSliderSet1.length){
        index1 = 0;
    }
}

var prev = function(){
    if(--index1 < 0) index = DemoSliderSet1.length - 1;
    demoSliderCarousel1();
};

var next = function(){
    if(++index1 >= DemoSliderSet1.length) index = 0;
    demoSliderCarousel1();
};

setInterval(demoSliderCarousel1,4000);