Смена картинок с эффектом
Написал простой слайдер, который отображается картинки в зависимости от того на какой элемент списка мы наводим курсор.
Структура следующая: <div class="wrapper"> <div class="display"> <div class="slide show"><img src="img1.png"></div> <div class="slide"><img src="img2.png"></div> <div class="slide"><img src="img3.png"></div> </div> <div class="switches"> <ul> <li class="curr">Картинка 1</li> <li>Картинка 2</li> <li>Картинка 3</li> </ul> </div> </div>
$("div.switches li").hover(function() {
$("div.switches li").removeClass("curr");
$(this).addClass("curr");
var index_switch = $(this).index();
$("div.display div.slide").removeClass("show").eq(index_switch).addClass("show");
});
Все работает, все класс. Только возникла необходимость добавить смену картинок с эффектом. Слайдер подключать ради такой мелочи както не хочется. Тем более что с задачей почти справился. Тем не менее есть один косяк. Придумал следующую логику. 1. Все контейнеры с картинками (div.slide) делаем видимыми + прописываем position: absolute чтобы в стопку лежали. 2. Обнуляем для всех их z-index: 0. 3. Первой и второй задаем z-index: 2 и 1 соответственно, чтобы сразу за отображаемой лежала следующая. 4. При наведении на следующую делаем у предыдущей fadeOut и обнуляем z-index для всех. 5. Затем для текущей ставим z-index: 2 а для следующей z-index: 1. Вроде по логике все верно, но почемуто первая смена первой и второй картинки происходит без эффекта. Подскажите верно ли я логику составил и может быть лучше и легче воспользоваться готовым слайдером? |
spo,
Вариант...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
.curr{
border: #CC0000 2px solid;
cursor: default;
}
img{
display: none;
position: absolute;
}
.show img{
display: block;
}
.display{
height: 100px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
$('.switches li').mouseenter(function(){
if($(this).hasClass("curr")) return;
$(".switches li").removeClass("curr");
$(this).addClass("curr");
var index_switch = $(this).index();
$('.display img').stop().fadeOut(500).eq(index_switch).fadeIn(1500)
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="display">
<div class="slide show"><img src="http://allanimation.narod.ru/cifri/11.gif"></div>
<div class="slide"><img src="http://allanimation.narod.ru/cifri/12.gif"></div>
<div class="slide"><img src="http://allanimation.narod.ru/cifri/13.gif"></div>
</div>
<div class="switches">
<ul>
<li class="curr">Картинка 1</li>
<li>Картинка 2</li>
<li>Картинка 3</li>
</ul>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:29. |