Question

我有大约20个不同的图像，我想在4个方框中淡入淡出。我需要它来从图像列表中选择一个图像并显示它。

框示例photo1，photo2，photo3，photo4是他们的名字。它们需要单独命名，因为它们绝对定位。

    <div id="photo1">
    <img src="images/photo.jpg" width="300" height="300" />
    <img src="images/photo2.jpg" width="300" height="300" />
    <img src="images/photo3.jpg" width="300" height="300" />
    <img src="images/photo4.jpg" width="300" height="300" />
    <img src="images/photo5.jpg" width="300" height="300" />
    </div>

到目前为止jquery

<script type="text/javascript">

//generate random number
var randomnumber=Math.floor(Math.random()*$("#photo1").children().length);
$(function() {
    //hide all the images (if not already done)
    $("#photo1 > img").hide();

    //set timeout for image to appear (set at 500ms)
    setTimeout(function(){
       //fade in the random index of the image collection
       $("#photo1 > img:eq(" + randomnumber + ")").fadeIn();
    }, 500);       
});
</script>

Answer 1

我重构了你的代码：

$(function() {
    // match all divs with ID starting with 'photo'
    $("div[id^=photo] > img").hide();
    setTimeout(function(){
       $("div[id^=photo]").each(function() {
           var rand = Math.floor(Math.random() * $(this).children().length);
           $(this).find('img:eq(' + rand + ')').fadeIn();
       });
    }, 500);       
});

请参阅http://api.jquery.com/attribute-starts-with-selector/

Answer 2

jQuery Cycle

非常方便。

多个图像淡入/淡出

2 个答案: