Показать сообщение отдельно
  #2 (permalink)  
Старый 30.03.2020, 07:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,807

бесконечная смена картинок
Perepelenok,
id это уникально, это для одного элемента, если много однотипных используют class!
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
  display : inline-block;
}

.slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}
  </style>
  <script src='https://code.jquery.com/jquery-latest.js'></script>
  <script>
   $(function() {
    $(".slideshow").each(function(i, el) {
    var items = $(">div", el),
        len = items.length,
        i = len - 1,
        duration = 1000,
        pause = 2000;
    items.hide().last().show();
    (function Reload() {
        items.eq(i).delay(pause).fadeOut(duration, Reload);
        i = ++i % len;
        items.eq(i).delay(pause).fadeIn(duration)
    })()
    })
  });
  </script>
</head>

<body>
<div class="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>
<div class="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>
</body>

</html>
Ответить с цитированием