jQuery изображение слайдер setInterval проблема

Question

Это мое первое использование jquery вне учебника, поэтому, конечно, у меня возникнут некоторые проблемы. Я добавил код в jsfiddle здесь: http://jsfiddle.net/b2Nq9/3/ Похоже, что он работает на jsfiddle (конечно, на jsfiddle нет изображений, но атрибут alt вращается нормально), за исключением случаев, когда код работает с реальными изображениями, первое изображение в порядке, но когда вращаются 2-е и 3-е изображения, мой макет становится проблематичным. Посмотрев на код, запущенный в firebug, я заметил, что код изменяет свойство отображения css. 1-е изображение, которое работает, изменяется между display: none и display: inline, тогда как другие изображения меняются между display: none и display: block. Похоже, мне нужно настроить код так, чтобы отображать оставшиеся изображения как встроенные, а не блокировать при их вращении. Я не знаю, как это сделать, и был бы благодарен за помощь.

Answer 1

.show() устанавливает следующий элемент CSS для элемента: display : none.

Поэтому, если вы хотите установить display : inline, используйте вместо этого функцию .css():

elements.first().css({ display : 'inline' });

У вас будет та же проблема с .fadeIn(1000), она анимирует непрозрачность элемента после установки display : block; opacity : 0.Попробуйте вместо этого:

elements.eq(counter).css({ opacity : 0, display : 'inline' }).animate({ opacity : 1 }, 1000);

Вот демонстрационная версия: http://jsfiddle.net/b2Nq9/5/ (вы можете наблюдать, как элементы переключаются между display : none и display : inline)

Answer 2

Чтобы сохранить ваш макет, вы захотите добавить ширину и высоту к вашему контейнеру div.Если в div нет видимого содержимого, а ширина и высота не определены, он не займет места на странице, что может привести к разрыву макета.(пространство, которое занял div, по существу «разрушится»).Это происходит потому, что в случае, если изображение еще не загружено или короткое время, в течение которого оба изображения установлены как не отображаемые, div не будет содержать никакого видимого содержимого.