Выбор всех элементов
Здравствуйте!
https://codepen.io/kotya_ra/pen/QWbYEZZ Есть такой код. Подскажите плиз, как сделать так, чтоб работало и второе слайдшоу? |
бесконечная смена картинок
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> |
Часовой пояс GMT +3, время: 17:40. |