jQuery关于额外点击功能的间隔问题

发布于 2024-10-04 03:28:14 字数 2213 浏览 4 评论 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 make sow。当我将鼠标悬停在“.landkaart a”时，landkaart > li 必须展示并且间隔必须停止。当我用鼠标退出时。然后间隔必须重新开始。

原文

I have this javascript code:

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

And i have the 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>

The html have a lot of more li items than here show. But now my question.
Now the .landkaart ul li items rotate. Over 5 sec you see a new li item that come show.
But now must the javascript make sow. That when i hover ".landkaart a" The landkaart > li must be show and
the interval must be stop. When i go with the mouseout. Then the interval must be start again.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

百善笑为先 2024-10-11 03:28:14

我会这样做：

将函数移到外面
setInterval
设置布尔逻辑停止改变
如果光标位于

将鼠标悬停/移出事件添加到 li 元素

 var keepRotating = true;
       函数旋转（）{
            if(!keepRotating) 返回；
            $(".landkaart > ul > li").removeClass('open');


 if( ( 索引 + 1 ) >= len )
        {
            索引=0；
            $(".landkaart > ul > li:first").addClass('open');
        }
        别的
        {
            listitem.eq(index).next().addClass('open');
        }
        索引++；
    }


    $(".landkaart > ul > li").mouseover(function(){
      保持旋转=假；
      $(".landkaart > ul > li").removeClass('open');
      $(this).addClass('打开');
      索引 = $(".landkaart > ul).index(this);
    });


    $(".landkaart > ul > li").mouseout(function(){
      保持旋转=真；
    });


    setInterval( 旋转(), 5000);

I would do that by:

Move the function outside of the
setInterval
Put boolean logic to stop changing
if the cursor is over

Add your mouseover/out events to the li elements

       var keepRotating = true;
       function rotate() {
            if(!keepRotating) return;
            $(".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++;
    }


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


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


    setInterval( rotate(), 5000);

回复收藏 0 原文

~没有更多了~