Множественная автоматическая затухание/затухание в петле в нескольких divs

Question

У меня есть 3 столбца в таблице с разными картинками в каждом. Я стараюсь, чтобы в разные моменты времени выпадало с разными картинками в цикле и начиналось автоматически.

Мне удалось заставить его работать, но у меня есть примерно через 20 секунд у меня есть белые ящики, а не изображения.

Ссылка на него на https://jsfiddle.net/nmcj4yze/3/.

Мой Jquery код:

$(document).ready(function() { 
var InfiniteRotator = { 
    init: function() { 
     //initial fade-in time (in milliseconds) 
     var initialFadeIn = 4000; 
     //interval between items (in milliseconds) 
     var itemInterval = 4000; 
     //cross-fade time (in milliseconds) 
     var fadeTime = 4000; 
     //count number of items 
     var numberOfItems = $('.rotating-home').length; 
     //set current item 
     var currentItem = 0; 
     //show first item 
     $('.rotating-home').eq(currentItem).fadeIn(initialFadeIn); 
     //loop through the items 
     var infiniteLoop = setInterval(function() { 
      $('.rotating-home').eq(currentItem).fadeOut(fadeTime); 
      var rand = Math.floor(Math.random() * (numberOfItems - 1)) + 1; 
      currentItem = (currentItem + rand) % numberOfItems; 
      $('.rotating-home').eq(currentItem).fadeIn(fadeTime); 
     }, itemInterval); 
    } 
}; 
InfiniteRotator.init(); 
}); 
//]]> 

Css:

body { 
color:#999; 
font-family:"MS Serif", "New York", serif; 
font-size:16px; 
padding-left:20px;} 
/* slider */ 
#rotating-item-wrapper { 
list-style-type:none; 
margin:0; 
padding:0; 
height: 150px; 
} 
.rotating-home { 
display:; 
position: absolute; 
} 

И Html:

<table width="60%" align="center"> 
<tr> 
    <td> 
     <div id="rotating-home-wrapper"> 
      <div class="rotating-home"> 
       <img src="http://paul.cerrone.me/wp-content/uploads/2013/06/BQcDAAAAAwoDanBnAAAABC5vdXQKFjlCVTZ6M0RDM3hHN2xTbFRpWUlPQlEAAAACaWQKAXgAAAAEc2l6ZQ.jpg" height="100" width="100" border="0" /> 
      </div> 
      <div class="rotating-home"> 
       <img src="http://www.dailyfailcenter.com/sites/default/files/fail/ea662e71d267.jpg" class="slide" height="100" width="100" border="0" /> 
      </div> 
    </td> 
    <td> 
     <div class="rotating-home"> 
      <img src="http://blog.epromos.com/images/google-dog.jpg" class="slide" height="100" border="0" /> 
     </div> 
     <div class="rotating-home"> 
      <img src="http://www.thelastnewspaper.com/images-future/gps-dog-tracking-300x400.jpg" class="slide" height="100" border="0" /> 
     </div> 
    </td> 
    <td> 
     <div class="rotating-home"> 
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHzIZUSCKJBajh8kY8zbVmyYYBCbzgy7ADISw6h9cCJ-Mw2pwnFw" class="slide" height="100" border="0" /> 
     </div> 
     <div class="rotating-home"> 
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWgFW9ZbKPn3_ECEJgV58atYzlbyZzKzvkhgsP3zdt4BFmw_7GfQ" class="slide" height="100" border="0" /> 
     </div> 
    </td> 
    </div> 
</tr> 

Обновлено

Извините, я должен был быть более ясным. Сначала я хочу 3 колонки в таблице. Первый - 600x600, второй - 300x600, а третий - 300x600. Когда страница загружается, вы видите 3 фотографии. Через 4 секунды колонка 1 исчезает на другую картинку, не выходя на белый фон. Через еще 4 секунды колонка два исчезает на другом изображении, а после еще 4 секунд колонка 3 делает то же самое. Я хотел бы быть на непрерывном цикле, чтобы он начинался снова. Но я не мог этого сделать, я достиг чего-то близкого со случайным циклом, но у меня есть белый фон примерно через 20 секунд. Не знаю, где я буду ошибся

Я пробовал все и и везде.

Любая помощь будет очень признательна.

Благодаря

Answer 1

Я предполагаю следующее, что вы хотели:

https://jsfiddle.net/nmcj4yze/7/

Вы были на правильном пути. Я немного очистил ваш HTML-код и удалил CSS, который ничего не делал. Я также сделал так, чтобы исходное изображение в каждой таблице было скрыто.

Что касается javascript, я переключил селекторов на итерацию по каждому элементу <td> и использовал функцию jQuery fadeToggle() на ее содержимое. Учитывая, что первый элемент был скрыт по умолчанию, это немедленно переключит анимацию для обоих изображений.

Изменен код на следующее:

$(document).ready(function() { 
 
    var InfiniteRotator = { 
 
     init: function() { 
 
      //initial fade-in time (in milliseconds) 
 
      var initialFadeIn = 4000; 
 
      //interval between items (in milliseconds) 
 
      var itemInterval = 4000; 
 
      //cross-fade time (in milliseconds) 
 
      var fadeTime = 4000; 
 
      //count number of items 
 
      var rotationLimit = $('td').length + 1; 
 
      //set current item 
 
      var currentItem = 0; 
 
      //loop through the items 
 
      var infiniteLoop = setInterval(function() { 
 
       $('td').eq(currentItem).find('.rotating-home').fadeToggle(fadeTime); 
 
       currentItem++; 
 
       if(currentItem == rotationLimit) currentItem = 0; 
 
      }, itemInterval); 
 
     } 
 
    }; 
 
    InfiniteRotator.init(); 
 
}); 
 
//]]>

@charset"utf-8"; 
 
#page { 
 
    height: 100%; 
 
    display: none; 
 
} 
 
body { 
 
    color:#999; 
 
    font-family:"MS Serif", "New York", serif; 
 
    font-size:16px; 
 
    padding-left:20px; 
 
} 
 
.rotating-home { 
 
    position: absolute; 
 
} 
 
.rotating-home:first-of-type { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table width="60%" align="center"> 
 
    <tr> 
 
     <td> 
 
      <div class="rotating-home" data-display="0"> 
 
       <img src="http://paul.cerrone.me/wp-content/uploads/2013/06/BQcDAAAAAwoDanBnAAAABC5vdXQKFjlCVTZ6M0RDM3hHN2xTbFRpWUlPQlEAAAACaWQKAXgAAAAEc2l6ZQ.jpg" height="100" width="100" border="0" /> 
 
      </div> 
 
      <div class="rotating-home" data-display="1"> 
 
       <img src="http://www.dailyfailcenter.com/sites/default/files/fail/ea662e71d267.jpg" class="slide" height="100" width="100" border="0" /> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="rotating-home" data-display="2"> 
 
       <img src="http://blog.epromos.com/images/google-dog.jpg" class="slide" height="100" border="0" /> 
 
      </div> 
 
      <div class="rotating-home" data-display="3"> 
 
       <img src="http://www.thelastnewspaper.com/images-future/gps-dog-tracking-300x400.jpg" class="slide" height="100" border="0" /> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="rotating-home" data-display="4"> 
 
       <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHzIZUSCKJBajh8kY8zbVmyYYBCbzgy7ADISw6h9cCJ-Mw2pwnFw" class="slide" height="100" border="0" /> 
 
      </div> 
 
      <div class="rotating-home" data-display="5"> 
 
       <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWgFW9ZbKPn3_ECEJgV58atYzlbyZzKzvkhgsP3zdt4BFmw_7GfQ" class="slide" height="100" border="0" /> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table>