Карусель изображений Javascript или jQuery с динамически загружаемыми изображениями и ссылками - PullRequest
Новая
       87

Карусель изображений Javascript или jQuery с динамически загружаемыми изображениями и ссылками

9 голосов
/ 13 октября 2011

Есть ли хорошая карусель изображений javascript или jQuery, в которой будет отображаться 5 изображений, и если их будет больше, пользователь может щелкнуть далее, а следующие источники изображений и URL-адреса ссылок будут загружаться через AJAX?

Вполне возможно, что существуют тысячи изображений и каждая ссылка на веб-страницу, посвященную этому изображению, поэтому мне в основном нужна карусель изображений, которая может эффективно с этим справиться.

Ответы [ 4 ]

6 голосов
/ 22 октября 2011

Я думаю, что JQuery Cycle Plugin поможет вам 50% пути.Эта возможность довольно проста в использовании, и я думаю, что вы получите функциональность изображений «нажмите, чтобы получить больше», к которой вы стремитесь (с некоторыми довольно изящными эффектами перехода).

Однако яИспользуется только плагин со всеми изображениями, определенными на странице.В моем случае я делал «слайд-шоу», чтобы продемонстрировать использование приложения.HTML-код был довольно простым ... 

<div id="slideshow">
  <img src="Images/Usage1.png" />
  <img src="Images/Usage2.png" />
  <img src="Images/Usage3.png" />
  <img src="Images/Usage4.png" />
  <img src="Images/Usage5.png" />
  <img src="Images/Usage6.png" />
  <img src="Images/Usage7.png" />
  <img src="Images/Usage8.png" />
  <img src="Images/Usage9.png" />
  <img src="Images/Usage10.png" />
</div>
<a href="javascript:moveSlide('prev');" style="float: left;">&lt; Prev</a>
<a href="javascript:moveSlide('next');" style="float: right;">Next &gt;</a>

Связанный JavaScript - это ... 

function moveSlide(direction) {
    $("#slideshow").cycle(direction);
} // End function

$(document).ready(function () {
    $("#slideshow").cycle({
        fx: 'fade',
        speed: 300,
        timeout: 0
    });
});

(Нажмите здесь , чтобы увидеть эффект.)

Что касается решения дополнительной проблемы загрузки новых изображений, когда пользователь хочет получить еще немного, я думаю, что это всего лишь вопрос расширения кода за ссылкой «Далее» в моем примере.Ваш код будет выполнять вызов JQuery AJAX , чтобы получить следующие изображения, а затем добавить их в слайд-шоу div.

Наконец, это оставляет функциональность нажатия наИзображение для перехода на сайт.Вы можете попробовать поместить теги слайд-шоу img внутри соответствующих тегов a.Если плагин цикла не воспроизводится с тегами a, обработчики событий onclick на изображениях должны выполнить свою работу.

1 голос
/ 24 октября 2011

Я использовал jShowOff для проекта.

Преимущества:

  • Вы можете полностью контролировать HTML каждого слайда (таким образом, изображения или изображения, HTML и ссылки могутбыть использованы
  • В соответствии с одним из ваших требований, пользователь может вращать слайды самостоятельно

Задача

  • Вы должны прийтисо своим собственным решением AJAX и настройте его.

http://ekallevig.com/jshowoff/

У меня есть пример моего использования здесь: http://www.rhmachine.com/ (ссылки могут бытьизменено, чтобы показывать только предыдущий / следующий).

Я немного покопаюсь и посмотрю, смогу ли я найти решение AJAX, уже созданное для него.

1 голос
/ 22 октября 2011

Вы можете использовать jQuery Tools 'Scrollable в качестве слайдера и связать вызов $get() с кнопкой «Далее».

Вот демонстрационная версия: http://flowplayer.org/tools/demos/scrollable/edit.htm (Обратите вниманиекнопка «Добавить»).

В этой демонстрации он просто клонирует div и добавляет его.Вы можете сделать то же самое, нажав «Далее», но загружая контент из другого места.

0 голосов
/ 24 октября 2011

Первое решение довольно хорошее, другое решение, которое вам может понравиться и которое я использую: http://jquery.malsup.com/cycle/

...