Показать сообщение отдельно
  #2 (permalink)  
Старый 06.06.2013, 21:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

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>

Последний раз редактировалось рони, 06.06.2013 в 21:34.
Ответить с цитированием