var loader = new Vue(
{
el: '#loader',
data: {
volume: 0.5,
maxCharacters: 6,
maxBackgrounds: 6,
animationTime: 5000,
/* Do not touch next parameters ! */
characterImage: "",
backgroundImage: "",
characterClass: "",
backgroundClass: "",
showed: true,
previousRandom: 0,
previousRandomCharacter: 0,
gecis: 1,
audio: null,
isSoundPlayed: false,
},
mounted: function () {
// Launch music
this.audio = document.getElementById('introSound');
this.audio.volume = this.volume;
this.audio.play();
var _this = this;
_this.randomImages();
// Generate images every X seconds
window.setInterval(function () {
_this.showed= false;
window.setTimeout(function () {
_this.randomImages();
_this.showed= true
}, 2000);
}, this.animationTime);
},
methods: {
randomImages: function () {
var rightToLeft = Math.round(Math.random() * 1) == 1 ? true : false;
while (this.previousRandom == this.gecis) {
this.gecis = Math.ceil(Math.random() * this.maxBackgrounds - 1 ) + 1;
}
// Change images
this.previousRandom = this.gecis;
this.previousRandomCharacter = this.gecis;
var backgroundUrl = "img/background/" + this.gecis + ".jpg";
var characterUrl = "img/characters/" + this.gecis + ".png";
if(rightToLeft){
this.backgroundClass = "rightToLeftBG";
this.characterClass = "leftToRight";
}else{
this.backgroundClass = "leftToRightBG";
this.characterClass = "rightToLeft";
}
this.backgroundImage = backgroundUrl;
this.characterImage = characterUrl;
},
}
}); Ufak bir düzenleme yardımı
1
●72
- 05-06-2020, 09:15:15Bir html şablonunda images klasörü içerisindeki 1.jpg'den 6.jpg'e kadar olan resimleri random olarak 5 saniyede bir değiştirerek slide olarak sunuyor. İşlemin random olarak değil sırasıyla 1.jpg, 2.jpg, 3.jpg şeklinde gitmesini istiyorum. Bu konuda yardımcı olabilecek var mı?