Javascript幻灯片速度

时间:2018-04-18 14:35:26

标签: javascript html css slideshow

我的代码带有图像幻灯片。我想设置图像修复的时间。 (图像一个休息10分钟,然后淡出)。所有图像应休息约10分钟。我喜欢在我公司的Infoscreen中使用它。请帮助:)

(function() {

function Slideshow( element ) {
    this.el = document.querySelector( element );
    this.init();
}

Slideshow.prototype = {
    init: function() {
        this.wrapper = this.el.querySelector( ".slider-wrapper" );
        this.slides = this.el.querySelectorAll( ".slide" );
        this.previous = this.el.querySelector( ".slider-previous" );
        this.next = this.el.querySelector( ".slider-next" );
        this.index = 0;
        this.total = this.slides.length;
        this.timer = null;

        this.action();
        this.stopStart();
    },
    _slideTo: function( slide ) {
        var currentSlide = this.slides[slide];
        currentSlide.style.opacity = 1;

        for( var i = 0; i < this.slides.length; i++ ) {
            var slide = this.slides[i];
            if( slide !== currentSlide ) {
                slide.style.opacity = 0;
            }
        }
    },
    action: function() {
        var self = this;
        self.timer = setInterval(function() {
            self.index++;
            if( self.index == self.slides.length ) {
                self.index = 0;
            }
            self._slideTo( self.index );

        }, 3000);
    },
    stopStart: function() {
        var self = this;
        self.el.addEventListener( "mouseover", function() {
            clearInterval( self.timer );
            self.timer = null;

        }, false);
        self.el.addEventListener( "mouseout", function() {
            self.action();

        }, false);
    }


};

document.addEventListener( "DOMContentLoaded", function() {

    var slider = new Slideshow( "#main-slider" );

});


})();

2 个答案:

答案 0 :(得分:1)

嗯,只有在你的代码中控制任何与时间相关的东西,所以它是一个非常安全的赌注,这是你想要改变的。

您的Y-m-d H:i:s有效,其时间设置为setInterval()。将其更改为3000(10米* 60秒* 1000毫秒),您应该全部设置。

答案 1 :(得分:1)

action: function() {
        var self = this;
        self.timer = setInterval(function() {
            self.index++;
            if( self.index == self.slides.length ) {
                self.index = 0;
            }
            self._slideTo( self.index );

        }, 1000*60*10);

此函数使用setInterval,它要求以ms为单位的间隔作为第二个参数。在此示例中,它设置为3000,即3秒。

将其更改为我上面所写的内容(1000毫秒是1秒* 60 = 1分钟* 10 = 10分钟)。