-1
CSS3、JavaScriptまたはjQueryを使用して、1つのdivで異なる時間間隔で画像を変更する方法。最後の時間間隔をクリアする必要があります。Jsまたはjqueryを使用して異なる時間間隔で画像を変更する
CSS3、JavaScriptまたはjQueryを使用して、1つのdivで異なる時間間隔で画像を変更する方法。最後の時間間隔をクリアする必要があります。Jsまたはjqueryを使用して異なる時間間隔で画像を変更する
あなたはたぶん、このような何かがあなたを助けることができるこの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();
を試すことができます。
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);
何をしましたか?あなたの試みたコードを表示してください。 また、C#タグを削除します。 –