VPF::Помогите разобраться с логикой скрипта jQuery

MarkupDeveloper

Дата 15.6.2008, 13:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

Задание такое: необходимо создать скрипт наподобие галереи, но который в цикле показывает всю галерею, так же отдельно есть названия, которые активизируются соответственно картинке....
При ховере на название показывается нужная картинка, а при 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 функцию

Файл с исходниками прикрипил

Присоединённый файл ( Кол-во скачиваний: 5 )

animated.rar 35,39 Kb

krundetz

Дата 15.6.2008, 18:50 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

Предлагаю ввести некий флаг который у вас будет указывать на состояние работы цикла он допустим будет false когда мыш не навидена на элементы и true когда наведина. А при устанавливать этот флаг нужно по событию мыш наведина на элемент снимать необходимо когда мыш ушла с элемента. Тоесть когда флаг у вас труе делаем проверку видим что цикл не должен в этот раз сработать и переходим к следующий итерации и так до тех пор покане при проверке не выдаст что мыш не на элементе тогда запускаем смену картинки

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

MarkupDeveloper

Дата 16.6.2008, 15:56 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

Всем спасибо за просмотр.... Переделал полностью и скрипт заработал smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »