JQuery Интервал квест о дополнительной функции клика - PullRequest
Новая
       20

JQuery Интервал квест о дополнительной функции клика

0 голосов
/ 26 ноября 2010

У меня есть этот код JavaScript: 

var listitem = $(".landkaart > ul > li"),
                    len = listitem.length,
                    index = 0;

                $(".landkaart > ul > li:first").addClass('open');

                setInterval( function() {
                    $(".landkaart > ul > li").removeClass('open');

                    if( ( index + 1 ) >= len )
                    {
                        index = 0;
                        $(".landkaart > ul > li:first").addClass('open');
                    }
                    else
                    {
                        listitem.eq( index ).next().addClass('open');
                    }
                    index++;
                }, 5000);

И у меня есть HTML, 

<div class="landkaart">
                <ul>
                    <li><a class="doetinchem" title="Vestiging Doetinchem" href="vestigingen.html">Doetinchem</a>
                        <div class="doetinchem">
                            <div class="pijl"></div>
                            <ul>
                                <li><h2>Doetinchem</h2></li>
                                <li>Gildenbroederslaan 4</li>
                                <li>Postbus 196</li>
                                <li>7000 AD Doetinchem</li>
                                <li>Telefoon (0314) 37 70 00</li>
                                <li>Telefax (0314) 37 70 05</li>
                                <li><a class="email" href="mailto:doetinchem@kabaccountants" title="Stuur een mail naar: doetinchem@kabaccountants">doetinchem@kabaccountants</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>

HTML имеет гораздо больше элементов li, чем здесь показаноНо теперь мой вопрос.Теперь элементы .landkaart ul li вращаются.Через 5 секунд вы увидите новый элемент li, который появится.Но теперь яваскрипт должен сеять.Что при наведении курсора ".landkaart a" Landkaart> li должен быть показан и интервал должен быть остановлен.Когда я иду с мышью.Затем интервал должен быть начат снова.

1 Ответ

0 голосов
/ 26 ноября 2010

Я бы сделал это следующим образом:

  1. Переместите функцию за пределы setInterval
  2. Поставьте булеву логику, чтобы она перестала изменяться, если курсор находится над

  3. Добавьте ваши события mouseover / Out к элементам li 

           var keepRotating = true;
       function rotate() {
            if(!keepRotating) return;
            $(".landkaart > ul > li").removeClass('open');


<pre><code>        if( ( index + 1 ) &gt;= len )
        {
            index = 0;
            $(".landkaart &gt; ul &gt; li:first").addClass('open');
        }
        else
        {
            listitem.eq( index ).next().addClass('open');
        }
        index++;
    }


    $(".landkaart &gt; ul &gt; li").mouseover(function(){
      keepRotating = false;
      $(".landkaart &gt; ul &gt; li").removeClass('open');
      $(this).addClass('open');
      index = $(".landkaart &gt; ul).index(this);
    });


    $(".landkaart &gt; ul &gt; li").mouseout(function(){
      keepRotating = true;
    });


    setInterval( rotate(), 5000);
...