jquery image slider setInterval issue

Question

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

Answer 1

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

Answer 2

.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)