Автоматическое позиционирование стрелок на слайд-шоу - PullRequest
0 голосов
/ 11 декабря 2011

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

Конецпродукт должен быть примерно таким, как Криси: http://www.kriesi.at/themes/upscale/

Я посмотрел на его код, но не могу понять его.Любая помощь будет оценена!

Спасибо!

Ответы [ 2 ]

1 голос
/ 11 декабря 2011

Я не понимаю, что вы подразумеваете под "Я не могу понять, как изначально расположить их над слайд-шоу ... Если я сделаю это в CSS, то это не будет работать на всех разрешениях экрана". ...

Если расположить стрелки относительно слайд-шоу, проблем не будет. Например, чтобы разместить их в верхнем левом и верхнем правом углах, включите в свои стили следующее:

#slideshowcontainer{
   width: 960px; 
   height: 400px;
   position: relative;
}
#leftarrow{
   position: absolute;
   top: 0px;
   left: -40px; /* position the arrow 40px to the left of the slideshow */
}
#rightarrow{
   position: absolute;
   top: 0px;
   right: -40px; /* position the arrow 40px to the right of the slideshow */
}

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

1 голос
/ 11 декабря 2011

Стрелки расположены в.Этот блок позиционируется как абсолютный с верхним значением как 50% - 12px (margin-top: -12px);

Затем есть список, который содержит изображения и другие данные и влияет на высоту его родителя.*

Итак, в основном, в коде, когда пользователь нажимает на стрелку, jQUery probabaly использует outerHeight () для получения высоты элементов li, а затем использует animate () для изменения высоты, которая влияет на высотув свою очередь плавно меняет положение стрелок.


Лично я считаю плохой дизайн, когда стрелки меняют свою позицию.Очень раздражает, когда приходится перемещать мышь вверх и вниз каждый раз, когда вы хотите увидеть следующий слайд.

...