js / jquery：如何随机化图像 [英] js / jquery: How to randomize images
本文介绍了js / jquery：如何随机化图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是所有代码（图片位于//在此数组中填写图片）：
< div id =counter_2class =counter>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.jstype =text / javascriptcharset =UTF-8> < /脚本>
< script src =js / jquery.countdown.jstype =text / javascriptcharset =UTF-8>< / script>
< script type =text / javascript>
<！ - ready（）函数将强制浏览器运行等待运行javascript，直到整个页面加载 - >
$（document）.ready（function（）{
//构造和启动计数器
//的jquery代码已被封装在一个函数中，所以我们可以随时调用它（
image：'img / digits.png'，
startTime：'00：10 '，
timerEnd：function（）{callback（imageLoader）}，
format：'mm：ss'
}）
}
//处理任何需要每次完成
函数回调（imageLoader）{
//替换图像
$（'＃image'）。attr（'src'，imageLoader.nextImage（））;
$（'＃counter_2'）。empty（）; //清除已完成的计数器，因此可以在它的位置创建一个新的
startCounter（imageLoader）; //构造一个新的计数器并启动它
}
fu nction ImageLoader（images）{
this.images = images;
this.current = 0;
this.nextImage = function（）{
this.current =（this.current + 1）％this.images.length;
返回this.images [this.current] ;;
//在这个数组中填入图片
imageLoader = new ImageLoader（['img / wallpapers / 2.jpg'，'img / wallpapers / 3.jpg '，'img / wallpapers / 4.jpg'，'img / wallpapers / 5.jpg'，'img / wallpapers / 6.jpg'，'img / wallpapers / 7.jpg'，'img / wallpapers / 9.jpg '，'img / wallpapers / 10.jpg'，'img / wallpapers / 11.jpg'，'img / wallpapers / 12.jpg'，'img / wallpapers / 13.jpg'，'img / wallpapers / 14.jpg '，'img / wallpapers / 15.jpg'，'img / wallpapers / 16.jpg'，'img / wallpapers / 17.jpg'，'img / wallpapers / 18.jpg'，'img / wallpapers / 19.jpg '，'img / wallpapers / 20.jpg'，'img / wallpapers / 21.jpg'，'img / wallpapers / 22.jpg'，'img / wallpapers / 23.jpg'，'img / wallpapers / 24.jpg '，'img / wallpapers / 25.jpg'，'img / wallpapers / 26.jpg'，'img / wallpapers / 27.jpg'，'img / wallpapers / 28.jpg'，'img / wallpapers / 29.jpg '，'img / wallpapers / 30.jpg'，'img / wallpapers / 31.jpg'，'img / wallpapers / 32.jpg'，'img / wallpa / img / wallpapers / 34.jpg'，'img / wallpapers / 35.jpg'，'img / wallpapers / 36.jpg'，'img / wallpapers / 37.jpg'，'img / images / 38.jpg'，'img / wallpapers / 39.jpg'，'img / wallpapers / 40.jpg'，'img / wallpapers / 41.jpg']）;
startCounter（imageLoader）; //设置一切！ （构建一个新的计数器并启动它）
}）;
< / script>
< div id =middle_wallpaper-actual>
< img id =imagesrc =img / wallpapers / 1.jpgalt =壁纸>
< / div>
解决方案
您可以使用 Math .random 函数生成随机数。例如，要在 0 和 9 之间生成随机数，您可以执行以下操作：
var num = Math.floor（Math.random（）* 10）;
我已经实现了一个 ImageLoader ，它将返回随机图片，永不会在所有图片都显示之前返回相同的图片。
函数ImageLoader（images）{
this.images = images;
this.usedIndexes = {};
this.displayedCount = 0;
ImageLoader.prototype.nextImage = function（）{
var self = this，
len = self.images.length，
usedIndexes = self.usedIndexes，
lastBatchIndex = self.lastBatchIndex，
denyLastBatchIndex = self.displayedCount！== len - 1，
index;
if（this.displayedCount === len）{
lastBatchIndex = self.lastBatchIndex = self.lastIndex;
usedIndexes = self.usedIndexes = {};
self.displayedCount = 0;
}
do {
index = Math.floor（Math.random（）* len）;
} while（usedIndexes [index] ||（lastBatchIndex === index&& denyLastBatchIndex））;
self.displayedCount ++;
usedIndexes [self.lastIndex = index] = true;
return self.images [index];
};
I have a script that replaces an image every time the countdown reaches 0. Although I was wondering if it was possible, and how, I could get these images (I have simply just listed in order) to randomize each time the page is refreshed ect.
Here is all of the code (the images are located before " // Fill in images in this array"):
<div id="counter_2" class="counter">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jquery.countdown.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
<!-- The ready() function will force the browser to run wait running the javascript until the entire page has loaded -->
$(document).ready(function() {
// The jquery code for constructing and starting the counter
// has been wrapped inside a function so we can call it whenever we want to
function startCounter(imageLoader){
$('#counter_2').countdown({
image: 'img/digits.png',
startTime: '00:10',
timerEnd: function(){ callback(imageLoader) },
format: 'mm:ss'
})
}
// Takes care of whatever need to be done everytime
function callback(imageLoader){
// Replace image
$('#image').attr('src', imageLoader.nextImage());
$('#counter_2').empty(); // Clear the finished counter, so a new can be constructed in its place
startCounter(imageLoader); // Construct a new counter and starts it
}
function ImageLoader(images){
this.images = images;
this.current = 0;
this.nextImage = function(){
this.current = (this.current+1) % this.images.length;
return this.images[this.current];;
}
}
// Fill in images in this array
imageLoader = new ImageLoader(['img/wallpapers/2.jpg', 'img/wallpapers/3.jpg', 'img/wallpapers/4.jpg', 'img/wallpapers/5.jpg', 'img/wallpapers/6.jpg', 'img/wallpapers/7.jpg', 'img/wallpapers/9.jpg', 'img/wallpapers/10.jpg', 'img/wallpapers/11.jpg', 'img/wallpapers/12.jpg', 'img/wallpapers/13.jpg', 'img/wallpapers/14.jpg', 'img/wallpapers/15.jpg', 'img/wallpapers/16.jpg', 'img/wallpapers/17.jpg', 'img/wallpapers/18.jpg', 'img/wallpapers/19.jpg', 'img/wallpapers/20.jpg', 'img/wallpapers/21.jpg', 'img/wallpapers/22.jpg', 'img/wallpapers/23.jpg', 'img/wallpapers/24.jpg', 'img/wallpapers/25.jpg', 'img/wallpapers/26.jpg', 'img/wallpapers/27.jpg', 'img/wallpapers/28.jpg', 'img/wallpapers/29.jpg', 'img/wallpapers/30.jpg', 'img/wallpapers/31.jpg', 'img/wallpapers/32.jpg', 'img/wallpapers/33.jpg', 'img/wallpapers/34.jpg', 'img/wallpapers/35.jpg', 'img/wallpapers/36.jpg', 'img/wallpapers/37.jpg', 'img/wallpapers/38.jpg', 'img/wallpapers/39.jpg', 'img/wallpapers/40.jpg', 'img/wallpapers/41.jpg']);
startCounter(imageLoader); // Set everything off! (Construct a new counter and starts it)
});
</script>
<div id="middle_wallpaper-actual">
<img id="image" src="img/wallpapers/1.jpg" alt="wallpapers">
</div>
解决方案
You can use the Math.random function to generate random numbers. For instance, to generate random numbers between 0 and 9, you can do the following:
var num = Math.floor(Math.random() * 10);
I have implemented an ImageLoader that will return random images and will never return the same images until they all been shown.
function ImageLoader(images) {
this.images = images;
this.usedIndexes = {};
this.displayedCount = 0;
}
ImageLoader.prototype.nextImage = function () {
var self = this,
len = self.images.length,
usedIndexes = self.usedIndexes,
lastBatchIndex = self.lastBatchIndex,
denyLastBatchIndex = self.displayedCount !== len - 1,
index;
if (this.displayedCount === len) {
lastBatchIndex = self.lastBatchIndex = self.lastIndex;
usedIndexes = self.usedIndexes = {};
self.displayedCount = 0;
}
do {
index = Math.floor(Math.random() * len);
} while (usedIndexes[index] || (lastBatchIndex === index && denyLastBatchIndex));
self.displayedCount++;
usedIndexes[self.lastIndex = index] = true;
return self.images[index];
};
这篇关于js / jquery：如何随机化图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
