Смена картинки по времени
Добрый времени дорогие форумчане. Возник вопрос по JQuery, сразу скажу что весь код не мой, аккуратно позаимствованный с другого сайта.
Код сам по себе меняет картинки по таймеру. Вопрос, можно ли как нить сделать что бы производилась проверка в папке на наличие изображений. И если файлы отсутствуют то что бы листало то что есть. function theRotator() { // Устанавливаем прозрачность всех картинок в 0 $('div#rotator ul li').css({opacity: 0.0}); // Берем первую картинку и показываем ее (по пути включаем полную видимость) $('div#rotator ul li:first').css({opacity: 1.0}); // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд setInterval('rotate()',2000); } function rotate() { // Берем первую картинку var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); // Берем следующую картинку, когда дойдем до последней начинаем с начала var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); // Расскомментируйте, чтобы показвать картинки в случайном порядке // var sibs = current.siblings(); // var rndNum = Math.floor(Math.random() * sibs.length ); // var next = $( sibs[ rndNum ] ); // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); // Прячем текущую картинку current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { // Запускаем слайдшоу theRotator(); }); <ul> <li class="show"><a href="http://google.ru/"><img src="1.jpg" width="882" height="366"></a></li> <li><a href="http://yandex.ru/"><img src="2.jpg" width="882" height="366"></a></li> <li><a href="http://nigma.ru/"><img src="images/image-3.jpg" width="500" height="313"></a></li> </ul> т.е. в li вписать сразу штук 100 картинок и что бы листал то что реально имеется, и не выводил пустой li |
Попробуйте вынести изображения в js-массив, перед переключением на новый слайд, который должен содержать это изображение, подгружать его через new Image и если подгрузка не вернула ошибку - добавлять слайд и переходить на него. Тут возможно подлагивание перед переходом на каждый новый слайд. Как вариант - сделать эту проверку перед загрузкой страницы, тогда в начале будет очень сильный лаг, но листаться будут быстро. А вообще, лучше, конечно, иметь дело с картинками, которые на самом деле есть. Как вариант - с помощью серверного языка периодически проверять доступность изображений и удалять те, которые исчезли
|
Понял, спасибо :)
|
Не работает выдаёт на экран 3 картинки и всё
Выдаёт на экран 3 картинки одна под другой и всё. Пробовал в одном html файле всё делать и пробовал отдельный js файл создавать - не работает.
|
freegas,
где код? |
Часовой пояс GMT +3, время: 00:03. |