JS InfiniteRotator Random Order
JS InfiniteRotator Random Order
我在我的网站上有一个图像旋转器,但我希望图像以随机顺序出现,这样相同的图像并不总是第一。我有旋转器工作,但我不知道如何随机化它。我的代码是在JS Bin这里:http://jsbin.com/dogimawuli/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>
<script>
$(window).load(function() {
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 4000;
//cross-fade time (in milliseconds)
var fadeTime = 50;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
</script>
<style>
#rotating-item-wrapper {position: relative;width: 468px;height: 60px;float: right;}
.rotating-item {display: none;position: absolute;top: 0;left: 0;}
</style>
</head>
<body>
<div id="rotating-item-wrapper">
<div style="width:400px;height:60px;background:red;"class="rotating-item">1</div>
<div style="width:400px;height:60px;background:green;"class="rotating-item">2</div>
<div style="width:400px;height:60px;background:blue;"class="rotating-item">3</div>
</div>
</body>
</html>
try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>
<script>
$(window).load(function() {
debugger;
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 4000;
//cross-fade time (in milliseconds)
var fadeTime = 50;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = Math.floor(Math.random() * numberOfItems)
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
nextItem = currentItem;
while(currentItem == nextItem) {
nextItem = Math.floor(Math.random() * numberOfItems);
}
currentItem = nextItem;
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
</script>
<style>
#rotating-item-wrapper {position: relative;width: 468px;height: 60px;float: right;}
.rotating-item {display: none;position: absolute;top: 0;left: 0;}
</style>
</head>
<body>
<div id="rotating-item-wrapper">
<div style="width:400px;height:60px;background:red;"class="rotating-item">1</div>
<div style="width:400px;height:60px;background:green;"class="rotating-item">2</div>
<div style="width:400px;height:60px;background:blue;"class="rotating-item">3</div>
</div>
</body>
</html>
基本上你是在循环下一个随机数,这个随机数与当前图像不同,缺点是某些图像将被"饿死",直到随机数选择该图像编号。
相关文章:
- Css order属性不't在Jquery设置时更新
- Angular ng repeat order将多个字段作为一个字段
- 如何使一个Math.random数组元素比另一个数组元素更有可能被选中
- Math.random不断返回相同的答案
- Javascript Random Array
- MongoDB Querying: Order & Export Results
- JS:如何在使用 Math.random() 时排除一系列值
- SQL应该查询's ORDER BY列写入JS代码中
- Javascript;使用math.random函数随机执行一个操作
- 使用js:order<创建表时出现问题;tr>并且<td>
- Math.random()如何在javascript中工作
- for loop, Math.random() 不按预期运行
- 在 jQuery 中的 Math.random() 之后找到 “li”
- Math.floor(Math.random()) +1 实际上做了什么
- 掷骰子脚本均匀分布吗?(使用 Math.random())
- 带有 php 变量的 Math.random javascript
- 你如何使 Math.random 数组中的每一个第 9 个元素都是同一个元素?[JavaScript]
- Java - ScriptEngineManager nashorn Math.random 不起作用
- 无法分享包含引用和作者(FCC Random Quote Machine)Javascript/JQuery的推文
- JS InfiniteRotator Random Order