Интересный эффект смены картинок

В этом уроке мы рассмотрим интересный эффект смены картинок, сделанный при помощи плагина к jQuery, который называется jQuery.ImageSwitch.

demosourse

Шаг 1.

Подключим необходимые для работы скрипты, прописав следующий код между тегами <head>:

<script type="text/javascript" src="example/jQuery.js"></script>

        <script type="text/javascript" src="example/Groject.js"></script>

Сразу после этого вставим следующий скрипт:

<script type="text/javascript">

var ImgIdx = 2;

function PreloadImg(){

$.ImagePreload("images/slash2.jpg");

$.ImagePreload("images/slash3.jpg");

$.ImagePreload("images/slash4.jpg");

$.ImagePreload("images/slash5.jpg");

}

$(document).ready(function(){

PreloadImg();

$(".SlashEff ul li").click(function(){

$(".Slash").ImageSwitch({Type:$(this).attr("rel"), 

NewImage:"images/slash"+ImgIdx+".jpg", speed: 4000

});

ImgIdx++;

if(ImgIdx>5) ImgIdx = 1;

}); 

});

</script>

В этом скрипте мы прописали пути к картинкам, которые будут использоваться. Обратите внимание, что названия изображений должны отличаться лишь конечной цифрой, т.е.: slash1.jpg, slash2.jpg, slash3.jpg, slash4.jpg и т.д. Расширение у картинок тоже должно быть одинаковым. В нашем случае это jpg.

Если вы изменяете пути к картинкам, то соответственно поменяйте параметр NewImage: в этом скрипте.

Шаг 2.

Между тегами <head> или в отдельном файле CSS-стилей пропишите следующие стили:

.SplashFrame{

background: url(images/slashfra.jpg) no-repeat 0 0;

width: 497px;

height: 236px;

margin: 0 auto;

padding: 27px 0 0 36px;

}

.SlashEff{

width: 550px;

height:62px;

margin: 20px auto 0;

padding: 5px 0 0 60px;

}

.SlashEff ul li{

float: left;

list-style-image: none;

list-style-type: none; 

width: 100px;

cursor: pointer;

}

.SlashEff ul li:hover{

text-decoration: underline;

}

Шаг 3.

В нужное место вставляем код непосредственно блока с изображениями.

Здесь используется 4 вида смены изображений. Ненужные Вам можете удалить, убрав элементы списка с ними.

 <div>

<div class="SplashFrame">

<img src="images/slash1.jpg" alt="Slash" class="Slash"/>

</div> 

<div class="SlashEff">

<ul>

<li class="TryFadeIn" rel="FadeIn">Fade in</li>

<li class="TryFlyIn"  rel="FlyIn">Fly in</li>

<li class="TryFlyOut"  rel="FlyOut">Fly out</li>

<li class="TryFlipOut"  rel="FlipOut">Flip out</li> 

</ul> 

</div>

</div>

Готово! До новых встреч!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hieu.co.uk
Перевел: Сергей Патин
Урок создан: 21 Мая 2009
Просмотров: 49733
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^