Задание такое: необходимо создать скрипт наподобие галереи, но который в цикле показывает всю галерею, так же отдельно есть названия, которые активизируются соответственно картинке....
При ховере на название показывается нужная картинка, а при mouseout опять должен заработать цикл. Вот тут-то у меня и возникла проблема
| Код |
var _first = true;
var _time = null;
var _el = false;
var _note = false;
var _index = false;
var _index2 = false;
function initPage() {
_el = $(".pic2 img");
_note = $(".nav2 li");
time = setTimeout((function() {
innerfade();
}), 2000);
}
if (window.addEventListener)
window.addEventListener("load", initPage, false);
else if (window.attachEvent)
window.attachEvent("onload", initPage);
function innerfade() {
// расставляем классы
if (_first) {
_el.filter(".active").next().addClass('next');
_note.eq(0).addClass("active");
_first = false;
}
// дисплей блок некстовому элементу
_el.filter(".next").fadeIn(0);
// манипулируем названиями
_index = _el.index($(".next")[0]);
_note.filter(".active").removeClass("active");
_note.eq(_index).addClass("active");
// прячем активный и показуем следующий элемент
_el.filter(".active").fadeOut(300, function(){
$(this).removeClass("active");
_el.filter(".next").addClass('active').removeClass("next").next().addClass('next');
// если последний елемент, то добовляем класс некст первому элементу
if (!_el.filter(".active").next().is("img")) {_el.eq(0).addClass('next');}
});
// обрабатываем ховер на названия
$(_note).hover(function(){
clearTimeout(time);
_note.removeClass("active");
$(this).addClass("active");
_index2 = _note.index($(this)[0]);
_el.removeClass("next").removeClass("active");
_el.eq(_index2).addClass("next").fadeIn(0);
_el.not(".next").fadeOut(300, function(){
_el.filter(".next").addClass("active").removeClass("next");
});
},function(){
_el.eq(_index2).next().addClass("next");
if (!_el.eq(_index2).next().is("img")) {_el.eq(0).addClass('next');}
time = setTimeout((function() {
innerfade();
}), 6000);
});
// вызываем повторно функцию
time = setTimeout((function() {
innerfade();
}), 2000);
};
|
| Код |
<div class="hold">
<div class="pic2">
<img src="images/1.jpg" width="500" height="380" alt="" class="active" />
<img src="images/2.jpg" width="500" height="380" alt="" />
<img src="images/3.jpg" width="500" height="380" alt="" />
<img src="images/4.jpg" width="500" height="380" alt="" />
</div>
<ul class="nav2">
<li><a href="#">Фото 1</a></li>
<li><a href="#">Фото 2</a></li>
<li><a href="#">Фото 3</a></li>
<li><a href="#">Фото 4</a></li>
</ul>
</div>
|
Вообщем мучаюсь уже порядка 8 часов и никак у меня не получается сделать показ фоток при ховере на название... аж самому смешно...
Вообщем переберал кучу вариантов... при таком варианте работает через раз, а бывает глюки... короче помогите PLZ продумать hover функцию
Файл с исходниками прикрипил |
