任何人都可以帮我解决我的问题。 我有一个5个图像(设置在一个特定的位置)使用bootstrap然后我希望它有一个动画特定一个FADE动画页面加载这里是我的标记和js和它的工作正常但我想要我图像随机显示任何人都可以帮助我。
$(function () {
$('#fds img').each(function (i) {
$(this).delay((i++) * 1000).fadeTo(2000, 1);
})
});
<div id="fds">
<div class="col-md-12 margin-b-2" style="padding-left: 0; padding-top: 20px">
<div class="com-sm-6 col-md-3">
<img id="img1" class="thumbnail" src="../img/1.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg1();" />
</div>
<div class="com-sm-6 col-md-3">
<img id="img2" class="thumbnail" src="../img/2.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg2();" />
</div>
<div class="com-sm-6 col-md-3">
<img id="img3" class="thumbnail" src="../img/3.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg3();" />
</div>
<div class="com-sm-6 col-md-3">
<img id="img4" class="thumbnail" src="../img/4.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg4();" />
</div>
</div>
<div class="col-md-12">
<img id="img5" class="thumbnail" src="../img/5.png" alt="Alternate Text" style="padding-left: 10px; padding-right: 10px" height="300" width="1350" onclick="javascript:modalImg5();" />
</div>
</div>
答案 0 :(得分:1)
$(function() {
function Shuffle(o) {
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}; //stole...borrowed from CSS tricks!
rand = [];
$('#fds img').each(function(i) {
rand.push(i);
})
Shuffle(rand);
for (i = 0; i < rand.length; i++) {
$('#fds img').eq(rand[i]).delay(i * 1000).fadeTo(2000, 1);
}
});
演示: http://jsfiddle.net/rdc47yqL/
因此,进程是:获取图像索引,将它们放在数组中,随机化/随机数组),遍历随机数组, 并使用eq()选择器来定位图像。