Здравствуйте, прошу у Вас помощи, так как уже довольно долго мучаюсь и ничего не выходит.
Вообщем нашёл в Интернете скрипт для плавной смены одной картинки на другую... Для одной картинки (точнее места) он всё хорошо работает, но у меня никак не получается поставить рядом допустим, ещё одну так же изменяющуюся картинку, оно либо переходит в то же место где первая (и оказывается под ней как бы) либо вообще не работает. Помогите пожалуйста! Вот код:
...
<link href="../menu/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
div#rotator div { position:absolute;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function theRotator() {
$('div#rotator div').css({opacity: 0.0});
$('div#rotator div:first').css({opacity: 1.0});
setInterval('rotate()',2000);
}
function rotate() {
var current = ($('div#rotator div.show')? $('div#rotator div.show') : $('div#rotator div:first'));
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator div:first') :current.next()) : $('div#rotator div:first'));
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
theRotator();
});
</script>
</head>
<body>
<div id="rotator">
<div class="show"><img src="img/1.jpg" width="200" height="300" style="border:1px solid #CCC"/></div>
<div> <img src="img/2.jpg" width="200" height="300" style="border:1px solid #CCC"/> </div>
</div>
...
По идее, я чтобы рядом расположить ещё картинку, я просто тупо ставлю ещё такой же див, только с другим картинками... но ничего не выходит, он переходит на место первой картинки...