Блог

У меня есть список изображений. Возможно ли, чтобы все объявления случайным образом появлялись в этих местах каждые 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);
    });


});
  

Действительно не уверен, как это сделать. кто-нибудь может указать мне правильное направление?

Я бы сохранил исходные изображения в массиве, а затем выполнял итерации по массиву. Что-то вроде этого:

 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.

Ознакомьтесь с плагином jQuery Cycle. У него есть random опция, которая делает именно то, что вы описываете.