Бесконечная смена изображений на jQueryВ данном уроке мы рассмотрим весьма прикольную вещь для сайта, а именно бесконечная смена изображений с помощью jquery, все это будет осуществляться благодаря событию благодаря маленькому плагину. По этому мы разберемся как создать интересный эффект, который будет проявляться при наведении курсора мыши на объект. Будет включаться очень быстрое слайдшоу, которое может привлекать внимание посетителя своей динамикой. Данное решение может отлично подойти для привлечения посетителей к рекламе или другим необходимым ресурсам на сайте.

 
Ниже представлен код слайдшоу, в котором изображения вытягиваются из неупорядоченного списка и показываются в бесконечном цикле плагином jQuery Cycle.

Бесконечная смена изображений на jQuery

Элемент .link обеспечивает адрес URL на который производится переход при нажатии кнопки мыши.

Размер слайдшоу — 200px х 200px. Он зависит от размера логотипа и слайдов. При изменении потребуется настройка координат положения фона.

  • Логотип переключается между двумя вариациями цвета с использованием техники работы со спрайтами.
  • Неупорядоченный список получает класс “active” при наведении курсора мыши, что делает его видимым.

На jQuery возлагаются две задачи:

  • Связать плагинjQuery Cycle с нашим неупорядоченным списком, превращая его в слайдшоу.
  • Переключать между паузой и проигрыванием при наведении курсора мыши. Слайдшоу будет скрываться и останавливаться, когда курсор мыши покидает элемент.

Вот и все. Все необходимые материалы можно найти в исходниках. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.