Как сделать слайдер фоновых изображений, или сменяющийся фон на CSS и JQuery

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

Для того чтобы реализовать задуманное, нам понадобится библиотека jquery, и дополнительный jquery скрипт – bgstretcher. Для начала, скачивайте bgstretcher-скрипт.

Слайдер фоновых изображений при помощи css и JQuery

Начнем, кодить. Для начала подключаем скрипт bgstretcher и библиотеку jquery, скачать всё можно в одном архиве, упомянутом чуть выше. Далее открывает код страницы, на которой планируется использование скрипта, сменяющего фоновые изображения и

1. Подключаем скачанные библиотеки

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/bgstretcher.js"></script>

Лично, я для удобства закинул все скачанные скрипты в папку js, пожалуйста не забудьте учесть данный факт при использовании в собственном проекте – измените путь к распакованным js файлам при необходимости.

2. Подключаем файл css-стилей, или же вставляем код css непосредственно в файл с html-структурой

HTML {_background: #fff url(/images/trans.gif) no-repeat fixed;}
.bgstretcher-area { text-align: left; }
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
position: absolute;
top: 0;
left: 0;}

.bgstretcher UL, .bgstretcher UL LI {
margin: 0;
padding: 0;
list-style: none;}
.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 1;
_position: absolute; /*IE6 doesn't support fixed positioning*/
top: 0;
left: 0;
}

Я вставил данный код в отдельный файл стилей с именем “bgslider.css”, и подключил его к html-файлу, между тегамии:

<link href="bgslider.css" rel="stylesheet" type="text/css" />
3. Вставляем в код html-страницы, между тегамии, код div-элемента, в котором по сути и будет прокручиваться фоновые изображения:
<div id="page" style="display: none_;"></div>

4. На заключительном этапе, вставляем код jquery-скрипта, который будет прокручивать фоновые изображения. Код вставляем между тегамии, но ниже текста подключения библиотек-jquery.

<script type="text/javascript">
// <![CDATA[$(document).ready(function()
{$('BODY').bgStretcher(
{images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
imageWidth: 1024,
imageHeight: 768,
slideDirection: 'N',
slideShowSpeed: 1000,
transitionEffect: 'fade',
sequenceMode: 'normal',
buttonPrev: '#prev',
buttonNext: '#next',
pagination: '#nav',
anchoring: 'left center',
anchoringImg: 'left center'});
});
// ]]>
</script>

В моем примере, я добавил кнопки навигации и перехода по слайдам(переход на каждый конкретный слайд и кнопки “Предыдущая” и “Следующая“, для поочередного перелистывания слайдов), для этого вставил в любое удобное место, между тегамии, ниже описанный код.

<div id='nav' ></div><a href="#" id='prev'>Предыдущий слайд</a> | <a href="#" id='next'>Следующий слайд</a>

Для любителей по-эспериментировать с параметрами скрипта, приведу код с описанием параметров слайдера

imageContainer: 'bgstretcher', //имя div элемента в рамках которого работает слайдшоу фоновых изображений
resizeProportionally: true, //пропорциональное изменение размеров изображений
resizeAnimate: false, //изменение размеров анимации
images: [], //массив с именами изображений, которые будут использованы для слайда
imageWidth: 1024, //ширина исходного изображения в px
imageHeight: 768, //высота исходного изображения в px
maxWidth: 'auto', //максимальная ширина слайда, можно указать в px, но лучше auto-чтобы изображение растягивалось на все окноmaxHeight: 'auto', //максимальная высота слайда, можно указать в px, но лучше auto-чтобы изображение растягивалось на все окно
nextSlideDelay: 3000, //задержка в миллисекундах, на каждом слайде
slideShowSpeed: 'normal', //скорость пролистывания слайда, можно задать в миллисекундах
slideShow: true, //переключатель true
transitionEffect: 'fade', // Эффект перелистывания(none, fade, simpleSlide, superSlide)
slideDirection: 'N', // Направления смены слайда(север-N, юг-S, запад-W, восток-E, (Если эффект superSlide - NW, NE, SW, SE)
sequenceMode: 'normal', // Порядок перелистывания (normal-в порядке возрастания массива images, back-в порядке убывания массива images, в случайном порядке
buttonPrev: '', //Указывается id или class, объекта html-структуры - кнопка назад
buttonNext: '', //Указывается id или class, объекта html-структуры - кнопка вперед
pagination: '', //Указывается id или class, объекта html-структуры - навигации по слайдам
anchoring: 'left top', // Позиция выравнивания - right bottom center
anchoringImg: 'left top', // Позиция выравнивания изображений- right bottom center
preloadImg: false, //предварительная загрузка файлов(false-нет,true-да)
startElementIndex: 0, //начинать отсчет пролистываемых элементов с индекса, указанного в данном параметре
callbackfunction: null // указывается функция javascript, которая будет выполнятся каждый раз, когда изменился слайд

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

С уважением, . Google+