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

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

28.09.2013, 22:13. Показов 5760. Ответов 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
Ответ Создать тему
Новые блоги и статьи
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока
igorrr37 05.01.2026
/ * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03
palva 04.01.2026
Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru