Изменение образа каждые 30 секунд - цикл
Я хотел бы сделать изменение образа после 30 секунд...
Код, который я использую, похож на это:
Сценарий:
var images = new Array()
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
var x=0;
function changeImage()
{
document.getElementById("img").src=images[x]
x++;
}
И тело:
<img id="img" src="startpicture.jpg">
Теперь я еще не протестировал этого, но если мои вычисления будут корректны, то это будет работать :)
Теперь то, что я также хочу, должно сделать "исчезающий переход", и я хотел бы, чтобы изменение изображений циклично выполнилось (оно перезапускает после того, как все изображения показали). Какой-либо из Вас парни знают, как сделать это? Я не делаю :)
4 ответа
Я согласен с использованием фреймворков для подобных вещей просто потому, что это проще. Я очень быстро взломал это, просто затухает изображение, а затем переключается, также не будет работать в более старых версиях IE. Но, как вы можете видеть, код фактического затухания намного длиннее, чем реализация JQuery, опубликованная KARASZI István.
function changeImage()
{
var img = document.getElementById("img");
img.src = images[x];
x++;
if(x >= images.length){
x = 0;
}
fadeImg(img, 100, true);
setTimeout("changeImage()", 30000);
}
function fadeImg(el, val, fade){
if(fade === true){
val--;
}else{
val ++;
}
if(val > 0 && val < 100){
el.style.opacity = val / 100;
setTimeout(function(){fadeImg(el, val, fade);}, 10);
}
}
var images = [],
x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
Вы должны взглянуть на различные библиотеки javascript, они могут вам помочь:
У всех из них есть учебные пособия, и постепенное нарастание / затухание - это базовое использование.
Например, в jQuery:
var $img = $("img"), i = 0, speed = 200;
window.setInterval(function() {
$img.fadeOut(speed, function() {
$img.attr("src", images[(++i % images.length)]);
$img.fadeIn(speed);
});
}, 30000);
Я использовал этот плагин jQuery в прошлом:
Он отлично работал и делает именно то, что вы хотите.
Посмотрите на innerfade. Вот пример, где я использовал его, чтобы сделать именно то, что вам нужно, я думаю.