Достаточно часто видел такое же бесконечное слайдшоу выполненное на flash, а я решил найти простое решение, с возможностью изменения картинок с админки сайта.
Для того чтобы сделать такого рода смену картинок на javascript c использованием jquery потребуется совсем не много знаний. И это займет не более 15 минут. В <div> в котором будут менятся изображения вставим два тега <img>, как это сделано ниже <div id="photos"><img style="position: absolute; z-index: 200; display: block;" src="" alt="" id="photo1"><img style="position: absolute; z-index: 100; display: none;" src="" alt="" id="photo2"></div> Далее тут же или при загрузке страницы указываем массив картинок (я формировал его с помощью php для возможности смены через админку)
var imgs = ["img_1.jpg",
"img_2.jpg",
"img_3.jpg"];
var j=1;
var cnt = imgs.length-1;
//сразу при загрузке показваем первую картинку
$('#photo1').attr('src', imgs[0]);
//подгружаем вторую в скрытый див
$('#photo2').attr('src', imgs[1]);
//тут начинается бесконечное слайдшоу
setInterval("photos()", 4000);
И сама функция photos(). Не удивляйтесь что всего пару строк, такой уж jquery.
function photos() {
$('#photo1').fadeOut("slow", function() {
$(this).attr('src', imgs[j]).fadeIn("slow");
});
j++;
if(j>cnt) {
j=0;
}
$('#photo2').attr('src', imgs[j]);
}
Как видите все отлчино работает, причем никаких зависаний и подвисаний браузера функция setInterval() не дает. Сделать то сделал, а как называть такое чудо так и не понял, то-ли слайдшоу, то-ли карусель или просто смена картинок =)
Подскажите пожалуйста, а как сделать так, чтобы на каждую картинку была ссылка, Ваш метод мне понравился.
все так же просто в var imgs = ["img_1.jpg","img_2.jpg","img_3.jpg"]; вместо относительного пути указываем полный. т. е var imgs = ["http://webguruz.ru/wp-content/uploads/img_1.jpg"]; тоже пудет работать
Видимо, вопрос был о том, как сделать отдельную ссылку с каждой картинки
Если у кого не заработало – попробуйте переделать
setInterval(«photos()», 4000);
на
setInterval(photos, 4000);
у меня только так заработало. Админу большущее спасибо. Очень выручил.
Здравствуйте! я только изучаю juery поэтому извините, если глупый вопрос, но почему бы не задать в div сделать background-image которое и менять через setinterval?
потому что не будет предзагрузки следующей картинки, картинка будет загружаться только после того как ее поставят в background-image, следовательно не получиться красивого слайдшоу
Большое вам спасибо за за быстрый ответ, мне у вас понравилось, сайт очень симпатичный, тематика, правда, не для меня, но кое-что нашлось и для меня, и еще с огромным удовольствие почитала про дарвиновскую премию. эх, побольше бы про jquery!
спасибо)) как видите давно уже не писали ничего интересного… а у вас есть какие-то задачи реализацию которых вы бы хотели увидеть на jquery?
Я вот только не понял зачем нужно изображение с айди photo2, оно же ни где не используется!?
Здравствуйте, хотелось бы увидеть реализацию смены картинок как в windows phone 7.5
Админ молодец. Куча га*нюков выкладывают варианты тяжелые и глупые и не понятны…все просто ..весело и задарно 0 как и должно быть. Красавчик
Спасибо большое!
Делал скрипт абсолютно другого назначения, но ваш лег в основу и за это Вам огромное спасибо) сам бы не спраился