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>
