[英]Random images load without repeat
嗨,我找到了一个脚本,将图片一个接一个地加载到我的div元素中。 一切正常,但我希望它能加载随机图像,这些图像不会在所有images.length的圆圈中重复。
由于我是一个完全新手,我试图做一些事情,但大多数时候我能够加载随机图像,但没有重复检查。
如果可以的话,请帮忙。
谢谢大家!
<script src="js_vrt/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var images = ['img_vrt/pozadine/1p.jpg', 'img_vrt/pozadine/2p.jpg', 'img_vrt/pozadine/3p.jpg', 'img_vrt/pozadine/4p.jpg'];
var image = $('#pozad');
var i = Math.floor((Math.random() * images.length));
var ist;
//Initial Background image setup
image.css('background-image', 'url(' + images[i++] + ')');
//Change image at regular intervals
setInterval(function() {
image.fadeOut(1500, function() {
image.css('background-image', 'url(' + images[i++] + ')');
image.fadeIn(1500);
});
if (i == images.length)
i = 0;
}, 5000);
});
</script>
您可以使用下面答案中解释的随机播放方法。
并获得阵列上的第一个元素
image.css('background-image', 'url(' + images[0] + ')');
在对数组进行随机播放后加载相同的图像时,您可能会发现此方法存在问题。 在这种情况下,我建议您在变量中存储显示的最后一个图像的名称,并在数组进行混洗之前,只测试第一个元素是否等于最后一个图像。
var lastImageLoaded ='';
setInterval(function() {
shuffle(images);
var imageUrl = images[0];
if(lastImageLoaded !== ''){ // Handle the first load
while(lastImageLoaded === images[0]){
shuffle(images);
}
}
lastImageLoaded = image;
image.fadeOut(1500, function() {
image.css('background-image', 'url(' + imageUrl + ')');
image.fadeIn(1500);
});
这是一个完整的对象,它接收一个图像URL数组,然后随机显示它们直到它们全部显示出来。 评论应该是非常明确的,但如果我没有解释足够的话,可以随意提问。 这是一个小提琴
//Object using the Revealing Module pattern for private vars and functions
var ImageRotator = (function() {
//holds the array that is passed in
var images;
// new shuffled array
var displayImages;
// The parent container that will hold the image
var image = $("#imageContainer");
// The template image element in the DOM
var displayImg = $(".displayImg");
var interval = null;
//Initialize the rotator. Show the first image then set our interval
function init(imgArr) {
images = imgArr;
// pass in our array and shuffle it randomly. Store this globally so
// that we can access it in the future
displayImages = shuffle(images);
// Grab our last item, and remove it
var firstImage = displayImages.pop();
displayImage(firstImage);
// Remove old image, and show the new one
interval = setInterval(resetAndShow, 5000);
}
// If there are any images left in our shuffled image array then grab the one at the end and remove it.
// If there is an image present in the Dom, then fade out clear our image
// container and show the new image
function resetAndShow() {
// If there are images left in shuffled array...
if (displayImages.length != 0) {
var newImage = displayImages.pop();
if (image.find("#currentImg")) {
$("#currentImg").fadeOut(1500, function() {
// Empty the image container so we don't have multiple images
image.empty();
displayImage(newImage);
});
}
} else {
// If there are no images left in the array then stop executing our interval.
clearInterval(interval);
}
}
// Show the image that has been passed. Set the id so that we can clear it in the future.
function displayImage(newImage) {
//Grab the image template from the DOM. NOTE: this could be stored in the code as well.
var newImg = displayImg;
newImg.attr("src", newImage);
image.append(newImg);
newImg.attr("id", "currentImg");
newImg.fadeIn(1500);
}
// Randomly shuffle an array
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
return {
init: init
}
});
var imgArr = [
"https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg",
"https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg",
"https://i.ytimg.com/vi/icqDxNab3Do/maxresdefault.jpg",
"http://www.funny-animalpictures.com/media/content/items/images/funnycats0017_O.jpg",
"https://i.ytimg.com/vi/OxgKvRvNd5o/maxresdefault.jpg"
]
// Create a new Rotator object
var imageRotator = ImageRotator();
imageRotator.init(imgArr);
你可以尝试制作和数组填充0
var points = new Array(0,0,0, 0)
//each one representing the state of each image
//and after that you make the random thing
var images = ['img_vrt/pozadine/1p.jpg', 'img_vrt/pozadine/2p.jpg', 'img_vrt/pozadine/3p.jpg', 'img_vrt/pozadine/4p.jpg'];
while (points[i]!=1){
var image = $('#pozad');
var i = Math.floor((Math.random() * images.length));
var ist;
}
setInterval(function() {
image.fadeOut(1500, function() {
image.css('background-image', 'url(' + images[i++] + ')');
points[i]=1;
image.fadeIn(1500);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.