Как сделать горизонтальное слайд-шоу шириной 100% аналогично Vogue - PullRequest
Новая
       47

Как сделать горизонтальное слайд-шоу шириной 100% аналогично Vogue

0 голосов
/ 09 января 2012

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

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

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

Ответы [ 2 ]

0 голосов
/ 10 января 2012

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

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

в css: вы, вероятно, хотите сделать div, содержащий изображения, а затем применить 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 внутри внешнего с большей шириной, которая равна общему содержанию всех изображений в заполните этот внутренний контейнер div

использовать javascripts scrollLeft или цикл jquery или все, что работает и используйте один из описанных выше методов непрозрачности

сделать div внутри внешнего контейнера 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

0 голосов
/ 10 января 2012

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

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

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

...