Question

我有图像列表。是否有可能让所有广告每隔5秒随机旋转进出这些广告

<div id="s1" class="pics">

<img src="http://placekitten.com/200/200">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/180/180">
<img src="http://placekitten.com/170/170">
<img src="http://placekitten.com/140/140">
<img src="http://placekitten.com/160/160">

</div>


$(document).ready(function(){

    var numberOfImages;
    $(".pics img").each(function(){
        numberOfImages = $(".pics img").size();
        //alert(numberOfImages);
    });


});

真的不知道怎么做。谁能指出我正确的方向？

Answer 1

我会将图像源存储在一个数组中，然后迭代数组。像这样：

var myImages = [
    "http://placekitten.com/200/200",
    "http://placekitten.com/150/150",
    "http://placekitten.com/180/180",
    "http://placekitten.com/170/170",
    "http://placekitten.com/140/150",
    "http://placekitten.com/160/160"
];
var counter = 1;  // Start at number 2 since the HTML tag has the first

function switchImage() {
    $('#myImage').attr('src', myImages[counter]);
    counter += 1;

    if (counter == myImages.length) {
        counter = 0;
    }
}

$(document).ready(function() {
    setInterval(switchImage, 5000);
});

然后，在您的HTML中：

 <img id='myImage' src='http://placekitten.com/200/200' />

或者您可以在Google上搜索“jQuery循环”。就个人而言，我喜欢Nivo Slider。

Answer 2

查看jQuery Cycle Plugin。它有一个random选项，完全符合您的描述。

jquery动画图像

2 个答案: