Фоновое изображение слайд-шоу

Question

У меня есть массив php, который возвращается из базы данных, массив содержит пути к изображениям, которые я хочу, чтобы создать фон моего div-обертки в моем HTML, я хочу иметь возможность добавить некоторый javascript, который будет циклически повторяться массив и установленный интервал показывают следующее изображение в массиве, возможно ли это, и возможно ли также иметь некоторый контроль над ним, чтобы пользователь мог пропускать назад, вперед и также останавливать слайд-шоу.

Answer 1

Я на самом деле применил плагин jQuery Cycle , чтобы сделать почти то, что вы просите. Это отличный и универсальный плагин.

Я также вытаскиваю изображения из массива для добавления на страницу. Плагин захватывает изображения, скрывает то, что ему не нужно, и перебирает их.

Обновление Только что заметил, что вы хотите, чтобы пользователь мог контролировать движение вперед и назад. Цикл делает это также. Взгляните на пример пейджера .

---

Re: Комментарий к фоновому изображению

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

Стили:

#cycle, #content {
  position:absolute;
  top:0;
  left:50%; 
  width:800px;
  height:600px;
  margin-left:-400px; //middle of page
  z-index:1;
}

#content {
  z-index:100;
}

Javascript:

$('#cycle') 
.after('<div id="nav">') //needs some position styling
.cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav' 
});

HTML:

<div id="cycle">
  <img src="path/to/image1.jpg" />
  <img src="path/to/image2.jpg" />
</div>
<div id="content">Hello World!</div>

Answer 2

Мы используем плагин jQuery для кросс-слайдов - http://www.gruppo4.com/~tobia/cross-slide.shtml на сайте icauto.com

У нас есть взломподключить для решения прозрачности / непрозрачности на IE6 +