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

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

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

Author24 — интернет-сервис помощи студентам
Доброго времени суток. Столкнулся с вопросом. Есть массив путей к картинкам (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
Ответ Создать тему
Новые блоги и статьи
Агрегаты и сущности в DDD микросервисах
Javaican 10.04.2025
Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .
Многопоточность в C#: Task и параллельное программирование
UnmanagedCoder 10.04.2025
Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .
Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение.
Hrethgir 10.04.2025
В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .
Переменные в Python
py-thonny 10.04.2025
Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .
Многопоточность в C#: Task и асинхронные операции
UnmanagedCoder 10.04.2025
Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена).
Hrethgir 10.04.2025
В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .
Запуск контейнеров Docker на ARM64
Mr. Docker 09.04.2025
Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .
Vue SFC компонент на PHP с Fusion
Jason-Webb 09.04.2025
PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .
TypeScript vs JavaScript: Отличия и когда что использовать
Reangularity 09.04.2025
JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .
Подключение Kafka к Elasticsearch
Codd 09.04.2025
Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
Выделить код Копировать код Сохранить код Нормальный размер Увеличенный размер