Js veya jquery kullanarak farklı zaman aralıklı görüntüleri değiştirin

Question

CSS3, JavaScript veya jQuery kullanarak görüntüleri tek bir div içinde farklı zaman aralıklarıyla nasıl değiştirebilirsiniz. Son zaman aralığı temizlenmelidir. Bu size yardımcı olabilir gibi

Answer 1

Bu http://codepen.io/jammer99/pen/PNErKp

var timing = [1000, 2000, 500, 300, 800], 
    timeouts 

function runinterval() { 
    timeouts = setTimeout(function() { 
    clearTimeout(timeouts); 
    timing.shift(); 
    $(".imgholder").css("background-image", "url(https://unsplash.it/100/100/?random&i=" + new Date().getTime() + ")") 
    if (timing.length != 0) 
     runinterval(); 
    }, timing[0]) 
} 
runinterval(); 

Answer 2

Belki bir şeyler deneyebilirsiniz.

var setTimer = (function(){ 

    function setTimer(options){ 

     this.timings = options.timings; 
     this.element = options.element; 
     this.images = options.images; 
     this.index  = -1; 
     this.interval = false; 
     this.init(); 

    } 

    setTimer.prototype.init = function(){ 

     this.image_ = document.createElement('img'); 
     this.image_.setAttribute('class','slider-image'); 
     this.element.appendChild(this.image_); 
     this.set(); 

    }; 

    setTimer.prototype.set = function(){ 

     if(this.interval && false !== this.interval){ 
      clearTimeout(this.interval); 
     } 

     if(this.index >= this.images.length-1){ this.index = 0; } 
     else{ this.index++; } 


     var timing = this.timings[this.index]; 
     console.log(this.index); 
     console.log(timing); 

     this.interval = (function(_this){ 
          return setTimeout(function(){ 

          _this.switch_image(); 

          },timing); 
         })(this); 

    }; 


    setTimer.prototype.switch_image = function(){ 

     var index = this.index; 
     console.log('switching image to '+this.images[index]); 

     this.image_.setAttribute('src',this.images[index]); 
     this.set(); 


    } 

    return setTimer; 

})(); 

setTimeout(function(){ 

var options = { 
    timings: [10,1000,2000], 
    images : [ 'url1','url2','url3'], 
    element: document.getElementById('your-image-container-id') 
}; 
new setTimer(options); 

},1000);