слайд-шоу jQuery box

Я хочу разработать или использовать существующее слайд-шоу jQuery.

Ниже приводится описание слайд-шоу.

Будет 5 блоков, которые будут использовать один и тот же пул изображений и поворачивать изображения на блоках по отдельности, не отображая одно и то же изображение на 2 или более блоках одновременно.

Это будет выглядеть примерно так:

введите описание изображения здесь

В каждом поле будут отображаться вращающиеся (исчезающие) изображения.

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

Спасибо


jquery slideshow fade
person lior r    schedule 14.10.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

демонстрация jsBin

Используя подключаемый модуль jQuery fademe:

HTML:

<div class="boxes"></div>

CSS:

.box{
  width:100px;
  height:100px;
  border:4px solid #000;
  margin:5px;
  float:left;
}
.box img{
  position:absolute;
}

jQuery:

// IMAGES ARRAY:
images = [
  'http://placehold.it/100x100/cf5&text=1',
  'http://placehold.it/100x100/adf&text=2',
  'http://placehold.it/100x100/468&text=3',
  'http://placehold.it/100x100/953&text=4',
  'http://placehold.it/100x100/583&text=5',
  'http://placehold.it/100x100/f27&text=6',
  'http://placehold.it/100x100/48f&text=7'
];

// GENERATE BOXES
for(i=0;i<5;i++){
 $('.boxes').append('<div class="box"/>');
}

// APPEND ALL IMAGES TO EACH BOX
for(i=0;i<images.length;i++){
 $('.box').append('<img src="'+ images[i] +'" />');
}

// APPLY fademe plugin TO EACH BOX
for(i=0;i<5;i++){
 $('.box').eq(i).fademe(0,0,i+1);  // the 3rd value is the 'S' ooption (starting slide number)
}
person Roko C. Buljan    schedule 14.10.2012
comment
Потрясающие ! именно то, что я искал - person lior r; 14.10.2012
comment
похоже, что у этого плагина есть странная проблема в Internet Explorer 8 - вы можете видеть на странице плагина, что иногда какое-то случайное изображение просто исчезает, любые мысли почему? - person lior r; 03.12.2012
comment
Забудь об этом, выяснилось, что у меня в списке изображений стоит конечная запятая ... надеюсь, Internet Explorer 8 скоро исчезнет - person lior r; 04.12.2012

arrow_upward
0
arrow_downward

Я бы порекомендовал вам взглянуть на плагин jQuery SlideJS, если вы его еще не видели.

Проверьте this для различных примеров.

<script>
        $(function(){
            $("#slides").slides();
        });
    </script>

<body>
    <div id="slides">
        <div class="slides_container">
            <div>
                <img src="img1">
            </div>
            <div>
                <img src="img2">
            </div>
        </div>
    </div>
</body>

Вы также можете комбинировать индивидуальные параметры:

$(function(){
      $("#slides").slides({
        preload: true,
        preloadImage: '/img/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
      });
    });
person Anshu    schedule 14.10.2012