Вращающийся (изменяющийся), центрированный, не растянутый фоновый скрипт - PullRequest
0 голосов
/ 15 февраля 2012

Я пытаюсь найти скрипт, который позволил бы мне изменить фоновое изображение на моем веб-сайте и выполнить следующие условия:

  • Оставаться в центре
  • НЕ изменять размер
  • Не позволяет вам прокручивать, чтобы увидеть все целиком (другими словами, он должен действовать как обычный фон, а не изображение)
  • Медленно исчезать и проходить через несколько изображенийи затем перезапустите

Кажется, что очень легко выполнить одну или две из этих вещей, но все они вместе кажутся почти невозможными ... Есть много реализаций, использующих эту вещь слайдера jQueryно все они либо требуют, чтобы у вас были отдельные div-ы для каждого изображения, что затем требует, чтобы вы указали размер, чтобы видеть фоновое изображение, и, таким образом, позволяете прокручивать экран вокруг, ИЛИ, изображение изменяется во все окно, чтоЯ тоже не хочу, или это не будет по центру.

Этот урок содержит только то, что я ищу, кроме изображение изменяется до размера окна.Это может показаться дополнительной функцией, которая потребует больше , чем , а не , но я не могу понять, как от нее избавиться.

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

1 Ответ

0 голосов
/ 16 февраля 2012

Разобрался.

Вы можете использовать код из этого урока, но измените CSS так:

#slideshow, img.bgM {
    width:1600px;
    height: auto;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left:-400px;
    z-index:-9999;
}

Ширина равна ширине ваших изображений bg, обратите внимание, что все они должны быть одинаковыми, иначе они будут расти по ширине.

Положение: фиксированное; предотвратит прокрутку.

Но чтобы отцентрировать его с фиксированным позиционированием, вы должны выполнить левую часть на 50%, а затем установить значение поля left-left равным 1/4 ширины вашего изображения. Почему 1/4? Я не совсем уверен ... 1/2 имеет для меня смысл, и это то, что многие уроки по центрированию фиксированных элементов говорят, что это должно быть, но для меня это было 1/4. Weird!

В любом случае, это должно прекрасно работать. Надеюсь, это поможет кому-то еще!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...