Поиск скриптов - Страница 12 - Форум

Добро пожаловать на форум, Проходимец, это ваша панель

Страница 12 из 12

…

Форум - Logical-portal » Урна » Корзина » Поиск скриптов

Поиск скриптов

Liiion911

Дата: 04.09.2011, 13:24:17 | Сообщение # 166

Сообщений: 4411

Наград: 112

6952

Покормить админа
Мой бложе !!!

kingdi19

Дата: 28.09.2011, 18:48:34 | Сообщение # 167

Сообщений: 52

Наград: 0

http://www.youtube.com/watch?v=6h1-h-7g46w&feature=player_embedded

NEXU5

Дата: 15.10.2011, 18:21:07 | Сообщение # 168

Сообщений: 2569

Наград: 73

6462

Anonуmous

Дата: 15.10.2011, 20:01:37 | Сообщение # 169

We are legion

Сообщений: 1118

Наград: 53

4927

kingdi19,

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Простая замена картинок с помощью JQuery</title>

<style type="text/css">
div#rotator {position:relative; height:150px; margin-left: 15px;}
div#rotator ul li {float:left; position:absolute; list-style: none;}
div#rotator ul li.show {z-index:500;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>


<script type="text/javascript">

function theRotator() {
  // Устанавливаем прозрачность всех картинок в 0
  $('div#rotator ul li').css({opacity: 0.0});

  // Берем первую картинку и показываем ее (по пути включаем полную видимость)
  $('div#rotator ul li:first').css({opacity: 1.0});

  // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
  setInterval('rotate()',5000);
}

function rotate() {
  // Берем первую картинку
  var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));

  // Берем следующую картинку, когда дойдем до последней начинаем с начала
  var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));

  // Расскомментируйте, чтобы показвать картинки в случайном порядке
  // var sibs = current.siblings();
  // var rndNum = Math.floor(Math.random() * sibs.length );
  // var next = $( sibs[ rndNum ] );

  // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
  next.css({opacity: 0.0})
  .addClass('show')
  .animate({opacity: 1.0}, 1000);

  // Прячем текущую картинку
  current.animate({opacity: 0.0}, 1000)
  .removeClass('show');
};

$(document).ready(function() {
  // Запускаем слайдшоу
  theRotator();
});

</script>

</head>
<body>

<div id="rotator">
   <ul>
     <li class="show"><a href="http://google.ru/"><img src="images/image-1.jpg" width="500" height="313"  alt="pic1" /></a></li>
     <li><a href="http://yandex.ru/"><img src="images/image-2.jpg" width="500" height="313"  alt="pic2" /></a></li>
     <li><a href="http://nigma.ru/"><img src="images/image-3.jpg" width="500" height="313"  alt="pic3" /></a></li>
   </ul>
</div>

</body>
</html>