Плавная смена картинок в header

[Yulia 0]

Я нашла скрипт

http://wmdn.ru/javascript/smooth-changing-rotate-images-script-on-jquery/comment-page-1/#comments

Можете описать что и в какие файлы нужно вставить?

Спасибо.

[Yulia 0]

Вроде вставила. Но картинки, которые в списке не ложатся в header , а показываются со сдвигом.

Вы не могли бы посмотреть почему так получается, где прописан этот сдвиг

[wkornilow 1]

Ссылку в студию

[Yulia 0]

сама разобралась

[Yulia 0]

1) вставила в index.html сразу после <div id="header">

{literal}

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

<!-- Автор Dylan Wagstaff, http://www.alohatechsupport.net -->

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

{/literal}

<!-- <div#rotator> -->

<div id = "rotator">

<ul>

<li class="show"><a href="http://sanpalitra.ru/"><img src="templates/sanpalitra/img/logo.jpg" width="1010" height="312" /></a></li>

<li><a href="http://sanpalitra.ru/"><img src="images/content/Birex_rakovina.jpg" width="1010" height="312" /></a></li>

<li><a href="http://sanpalitra.ru/"><img src="images/content/Birex_rekovina1.jpg" width="1010" height="312" /></a></li>

</ul>

</div>

2) в stylesheet.css

div#rotator {

float:left;

position:absolute;

height:312px;

wirth: 1010px;

margin-left: 0px;

}

div#rotator ul li {

float:left;

position:static;

list-style: none;

margin: -15px 0px 0px;

}

div#rotator ul li.show {

list-style-type: none;

margin-left: 0; /* Отступ слева в браузере IE и Opera */

padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */

z-index:500;

float: left;

/*width: 100%; */

}

[Yulia 0]

у меня проблема - в эксплорере скрипт не работает, он просто виснет на последней картинке, а в firefox все нормально. Может кто-нибудь подскажет почему?

ссылка на сайт http://sanpalitra.ru

[support 447]

У Вас два раза на странице подключается jquery, это неправильно.

В VamShop уже по умолчанию подключается jquery, второй раз подключать его не надо, удалите второе подключение jquery.latest

[Yulia 0]

Убрала, не помогло. В эксплорере не работает.

[support 447]

Может дело в кодировке файла, точно в utf8 сохраняете?

или в самом javascript коде, который может не поддерживать IE старых версий.

[Yulia 0]

просто оригинальный скрипт работает, а мой нет

[support 447]

Ну я не в курсе, что это за скрипт и ничего сказать по нему не могу.