Добрый день! Нужна помощь в написании скрипта для плавной смены картинок с помощью random, то есть что бы картинки менялись в хаотичном порядке!
1
-
плавная смена картинок != смена картинок в хаотичном порядке. – sysashi 21 дек '11 в 8:56
добавить комментарий
|
1 ответ
почему бы не мспользовать прозрачность изображений и определенный шаг в их изменении? UPD:
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $sibs = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
и html-пример:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
</style>
<body>
<div id="slideshow">
<img src="image1.jpg" alt="Slideshow Image 1" class="active" />
<img src="image2.jpg" alt="Slideshow Image 2" />
<img src="image3.jpg" alt="Slideshow Image 3" />
<img src="image4.jpg" alt="Slideshow Image 4" />
</div>
</body>
</html>
-
отображается только первое изображение, там где указан class="active" и не происходит дальше нечего... в чём может быть загвоздка? – user5328 22 дек '11 в 17:37
-
1ну вот зачем так писать? setInterval( "slideSwitch()", 5000 ); люди, в javascript функция это тип данных, можно писать просто setInterval( slideSwitch, 5000 ); – user3545 22 дек '11 в 18:03
-