Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.77/30: Рейтинг темы: голосов - 30, средняя оценка - 4.77
25 / 25 / 4
Регистрация: 21.10.2012
Сообщений: 391

Перелистывание картинок

28.09.2013, 22:13. Показов 5802. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток. Столкнулся с вопросом. Есть массив путей к картинкам (php), мне нужно вывести эти картинки, и сделать небольшое слайдшоу, но без кнопок, чтобы они перелистывались сами через определенное время по кругу. Как это можно реализовать не подскажете? Т.е. надо получить массив из php в js и потом вывести картинки, меняя их через определенное время

Добавлено через 5 минут
Вот, в интернете нашел такой код, достойный (правильный?). Может что исправить?
И еще вопрос, как в этот код закинуть массив из php
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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();
});
Добавлено через 1 минуту
Да, и простите за глупый вопрос, но как мне обеспечить вывод картинок по этому скрипту? Я просто в js вообще не силен. Если не трудно, помогите пожалуйста

Добавлено через 10 часов 4 минуты
Есть люди, которые могут помочь?
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
28.09.2013, 22:13
Ответы с готовыми решениями:

Автоматическое перелистывание картинок
нашел скрипт в интернете перелистывание картинок. Переписал "под себя" в итоге в консоли хрома получаю ошибку: Uncaught SyntaxError:...

Перелистывание картинок javascript
Мне нужно создать круговое перелистывание картинок.Тоесть у меня есть 7 картинок , ниже их 2 кнопки (право лево) при нажатии на кнопку...

Перелистывание блоков
Всем доброго времени суток! Помогите пожалуйста с реализацией идеи. Например есть 10 блоков. Нужно чтобы можно было их перелистывать...

1
 Аватар для Refactor
96 / 89 / 29
Регистрация: 05.03.2010
Сообщений: 231
29.09.2013, 03:50
приатачил вам пример jquery_bxslider.rar с слайдером, все что вам нужно, это распарсить полученный массив путей и сгенерить строки вроде

HTML5
1
2
   <li><img src="myPath1" /></li>
   <li><img src="myPath2" /></li>
и сгенеренный html вставить в контейнер bxslider

и у вас получится

HTML5
1
2
3
4
<ul class="bxslider">
    <li><img src="myPath1" /></li>
    <li><img src="myPath2" /></li>
</ul>
jquery_bxslider.rar
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
29.09.2013, 03:50
Помогаю со студенческими работами здесь

Перелистывание влево
что нужно поменять в функции, чтобы картинка двигалась влево? function moveright() { if (curImg &lt; itemsCount - 1) { ...

Авто-перелистывание слайдера
Здравствуйте, уважаемые! Есть код слайдера flipster. Не могу разобраться как сделать, чтобы картинки автоматически менялись, допустим...

Читалка.перелистывание страниц
Надо организовать на сайте читалку, пока решил сделать чего попроще и сразу пришел в тупик. Допустим в папке есть картинки от 1 до 23 с...

Календарь Перелистывание по месяцам
Есть следующий календарь &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;...

Статичный слайдер с перелистывание фотографий
Слайдер из 5 блоков и при скроллинге нужно, чтобы фото переезжало в соседний блок. Кто-нибудь может подсказать названия готовых решений?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка.
Hrethgir 08.04.2026
Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики.
Hrethgir 07.04.2026
Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума
kumehtar 07.04.2026
Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами
Maks 07.04.2026
1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию
Maks 07.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru