Автоматическая смена картинок с помощью CSS и JQuery

Автор: Илья Остапенко /

Доброе время суток, дорогие читатели! В прошлом посте про CSS шаблоны, я обещал выкладывать различные CSS трюки или приемы, кому как угодно. Так вот с сегодняшнего дня я начну выполнять свое обещание, и первый трюк будет об автоматической смене картинок с помощью CSS и JQuery.

Автоматическая смена картинок с помощью CSS и JQuery

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

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

Третий файл будет находиться в другом архиве, так как он будет содержать эффекты перехода между картинками. В каждом файле будут настройки для определенного эффекта.  Чтобы правильно настроить скрипты на своем сайте, необходимо прописать нужные настройки в CSS файле, скрипте с эффектом, а так же в html коде. Сейчас я приведу вам 9 различных эффектов.

Затемнение - http://www.workwebsite.ru/scripts/fade.php

Полоски - http://www.workwebsite.ru/scripts/slices-1.php

Полоски 2 - http://www.workwebsite.ru/scripts/slices-2.php

Взрыв - http://www.workwebsite.ru/scripts/blast.php

Жалюзи - http://www.workwebsite.ru/scripts/blinds.php

Квадраты - http://www.workwebsite.ru/scripts/squares.php

Квадраты 2 - http://www.workwebsite.ru/scripts/squares-2.php

Вылет - http://www.workwebsite.ru/scripts/fly.php

Слайд - http://www.workwebsite.ru/scripts/basic.php

Во вложении вы найдете архив effects, в котором будут находиться все вышеприведенные эффекты.

Установить эффекты проще простого. Сейчас я опишу вам код страницы fade.php.  Надеюсь, как посмотреть код  страницы, вы знаете, иначе, на мой взгляд, рано вы задались вопросом, как создать сайт? В самом верху вы увидите две важные нам строчки.

В этих строчках мы подключаем два файла из архива scripts. Первый это файл CSS, который я накидал для своего случая, в вашем его придется редактировать под ваш сайт. Во втором скрипт, в котором прописаны настройки для работы с трюком. Его редактировать не надо, он будет работать со всеми девятью эффектами.

Это идентификаторы, которым присвоены настройки в CSS файле. Они отвечают за кнопки расположенные на картинках, ну и за параметры картинок (размер картинок, место положения и т.д.). Название идентификаторов, вы можете заменить на свои, но тогда, не забудьте заменить их и в файле с эффектом. Кстати, картинки навигационных кнопок, вы так же найдете во вложении в архиве pic.

Во всех подобных строчках прописаны изображения, которые будут присутствовать в трюке. Как видите каждому изображению можно присвоить свою ссылку. Текст, написанный в атрибуте alt ,будет выводиться в левом нижнем углу изображения. Естественно, в нем можно ничего не писать.

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

Все похожие строчки будут отображать кнопки в правом верхнем углу. Количество эти строк, должно совпадать с количеством строк с изображениями.

Ну и последнее, это подключение скрипта с эффектом. Он  обязательно должен находиться в конце, иначе не будет работать. Некоторые скрипты с эффектами придется редактировать под себя. Редактировать в нем нужно только размеры эффекта, необходимо прописывать те же самые размеры, что и у картинок. Во всех скриптах размеры находятся в самом конце кода.  Ещё советую прочитать статью "Эффект функций onMouseover и onMouseout на CSS"

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

Комментарии к записи


    Роман

Оставить комментарий

Это не спам.