Форум

spo · #1 (**permalink**) 06.06.2013, 19:06

Написал простой слайдер, который отображается картинки в зависимости от того на какой элемент списка мы наводим курсор.
Структура следующая:

<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.

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

Подскажите верно ли я логику составил и может быть лучше и легче воспользоваться готовым слайдером?

рони · #2 (**permalink**) 06.06.2013, 21:26

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>

Форум

Справочник

Discord чат

Курсы javascript