0

私はこの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 アイテムが表示されます。しかし今、javascript は種をまく必要があります。「.landkaart a」をホバーすると、landkaart > li が表示され、間隔が停止する必要があります。マウスアウトで行くとき。その後、インターバルを再開する必要があります。

4

1 に答える 1

0

私はそれを次のように行います:

  1. 関数を setInterval の外に移動します
  2. カーソルが上にある場合に変更を停止するブール論理を配置します
  3. マウスオーバー/アウト イベントを li 要素に追加します。

           var keepRotating = true;
           function rotate() {
                if(!keepRotating) return;
                $(".landkaart > ul > li").removeClass('open');
    
    
    
            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);
    
于 2010-11-26T08:06:05.813 に答える