Показать сообщение отдельно
  #4 (permalink)  
Старый 28.06.2014, 16:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

tanto39,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .prev-img{
    display: inline-block;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function ()
{
   var a = $('.mini-images a'), len = a.length, indx = 0;
   (function slider()
   {
       $('.big-img img').attr('src',$(a[indx]).attr('href'));
       indx = ++indx % len;
       window.setTimeout(slider, 3000);
   }());
   $('.mini-images a').click(function(eventObgect) {
		$('.big-img img').hide().attr('src',$(this).attr('href'));
		$('.big-img img').load(function() {
		$(this).fadeIn(500);
		});
		eventObgect.preventDefault();
	});
})
  </script>
</head>

<body>
<div class="slaider">
 <div class="big-img">
 <img src="images/tachka1.jpg" alt="tachka1" title="tachka"/>
 </div>
 <div class="mini-images">
 <div class="prev-img"><a href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg" alt="tachka1" title="tachka1"/></a></div>
 <div class="prev-img"><a href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" alt="tachka2" title="tachka2"/></a></div>
 <div class="prev-img"><a href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-lg.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg" alt="tachka3" title="tachka3"/></a></div>
 </div>
 </div>
</body>
</html>
Ответить с цитированием