Слайд-шоу jQuery
-
18-09-2019 - |
Вопрос
Я пытаюсь создать свое собственное слайд-шоу.Следующий код переходит с одного изображения на другое.Я бы хотел переключаться с img1.jpg на img4.jpg, но я не уверен, как делать паузу после каждого изменения.
i++;
temp = "img"+i+".jpg";
$("#img").fadeOut(function() {
$(this).load(function() { $(this).fadeIn(); });
$(this).attr("src", temp);
});
Обновить:Я изменил код на следующий.По совету Джона Бокера я переименовал изображения в img0, img1, img2, img3.Он переходит к первому, второму, третьему изображению и просто останавливается.Есть какие-нибудь идеи?
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var temp="";
function slideshow(i)
{
temp = "img"+i+".jpg";
$("#img").fadeOut(function() {
$(this).load(function() {
$(this).fadeIn();
// set a timeout of 5 seconds to show the next image;
setTimeout(function(){ slideshow((i+1)%4); }, 5000);
});
$(this).attr("src", temp);
});
}
slideshow(0);
});
</script>
</head>
<body>
<img src="img1.jpg" id="img"/>
</body>
</html>
Решение
Вы можете сделать это следующим образом, используя Установочный интервал:
$(function() {
var i = 0;
// Four-second interval
setInterval(function() {
$("#img").fadeOut(function() {
$(this).attr("src", "img" + i++ % 4 + ".jpg");
$(this).fadeIn();
});
}, 4000);
}
Я упростил несколько вещей, которые могли вызывать некоторые другие проблемы, с которыми вы сталкиваетесь, удалив (кажущийся излишним) вызов load
внутри вашего fadeOut
обратный вызов и устранение ненужных temp
переменная.
(Наконец, если вы делаете это не просто для того, чтобы научиться, подумайте об использовании одного из множества отличных плагинов для слайд-шоу, например Цикл.)
Другие советы
вероятно, у вас должно быть это внутри функции:
// show image i
function slideshow(i)
{
temp = "img"+i+".jpg";
$("#img").fadeOut(function() {
$(this).load(function() {
$(this).fadeIn();
// set a timeout of 5 seconds to show the next image;
setTimeout(function(){ slideshow((i+1)%4); }, 5000);
});
$(this).attr("src", temp);
});
}
посмотрите на этот пример...
$(function(){
$('.slideshow img:gt(0)').hide();
setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000);
});
просто измените 4000
Для 8000
в скрипте, если вы хотите сделать паузу на каждом изображении на 8 секунд вместо 4 секунд.
Взгляните на это Вопрос о слайд-шоу jQuery
настроенный window.setInterval(function, delay)
вызывать функцию с заданным интервалом для выполнения имеющегося у вас кода.
Существует множество плагинов, которые уже будут циклировать изображения для вас (если только задача не состоит в том, чтобы написать свой собственный), одним из моих особо любимых является плагин цикла.
Один из приемов заключается в том, чтобы анимировать свойство элемента до его текущего значения с помощью таймера.
Например
$("#img").fadeIn().show(3000).fadeOut();
Поскольку $ (this) уже виден, добавление .показать(3000) означает, что элемент остается видимым в течение 3 секунд, прежде чем исчезнуть