Как сделать 100% широкий горизонтальный слайд-шоу, похожий на Vogue

Question

Я пытаюсь найти учебник по созданию слайд-шоу похож на тот, который использует Vogue: http://www.vogue.com/

мне нужно использовать почти точно такую ​​же функциональность , однако активный слайд в середине будет иметь циклическую разбивку, чтобы перейти к следующему слайду вместе со стрелками. Он также будет иметь HTML-контент в основном активном слайде. Слайды рядом с ним будут «серыми» или показаны как неактивные, похожие на то, что находится на Vogue.

У кого-нибудь есть хорошие предложения по учебникам jquery, которые я могу использовать или плагины? Можно ли это сделать с помощью цикла jQuery?

Answer 1

Вы могли бы сделать это с помощью цикла, но я думаю, что модель взаимодействия/события на

http://flowplayer.org/tools/scrollable/index.html

является более надежным и вероятно, будет работать лучше для этого конкретного применения.

Answer 2

только некоторые намеки: изменить непрозрачность: в JavaScript:

yourelement.style.opactity = x/100; yourelement.style.filter="alpha(opacity=" + x + ")"; 

в CSS: вы, вероятно, хотите сделать дивы, содержащие изображения, а затем применить CSS-код

div.IMG_CONTAINER_SHOW{opacity:1;filter:alpha(opacity=100);} 
div.IMG_CONTAINER_HIDE{opacity:.5;filter:alpha(opacity=50);} 

и для для создания прокручиваемого div вам придется играть с js или jquery

Предложения:

сделать внешний контейнер div с определенной шириной, это будет окно, показанное на странице , сделать внутренний контейнер div внутри внешнего с большей шириной, которая равна общему содержимому всех изображений в пределах заполните этот внутренний контейнер с дивами

использование JavaScripts scrollLeft или Jquery циклом или любыми работами и использовать один из указанных выше способов непрозрачности

делают див внутри внешним контейнер DIV с с CSS:

div.ARROW_LEFT{position:absolute;top:50%;left:100px;width:50px;height:50px;cursor:pointer;} 
div.ARROW_RIGHT{position:absolute;top:50%;right:100px;width:50px;height:50px;cursor:pointer;} 

и HTML:

<div class='ARROW_LEFT' onClick='Yourjavascrpt fuunction'><img src='yourLTarrowimg' /></div> 
<div class='ARROW_RIGHT' onClick='Yourjavascrpt fuunction'><img src='yourRTarrowimg' /></div> 

вы можете обратиться к моей обучающей программе, это что-то немного более сложным, но вы можете использовать его части, если это помогает: http://electrifiedpulseone.blogspot.com/

и вот она в действии: http://electrifiedpulse.com/pictures_.html