暂停/恢复事件后的 jQuery 循环问题（自定义寻呼机）

Question

我正在使用 jquery 循环播放幻灯片。我无法更改给定的 html 代码，并且寻呼机中的元素（如下所示的 li html 元素）必须在 mouseover 和 mouseout 事件时暂停和恢复幻灯片。

该行为已实现，但是，当幻灯片暂停然后恢复时，图像开始每秒更改一次 (?)，然后以随机间隔更改 - 而我已指定 5 秒超时。

任何人都知道似乎是什么导致了问题，并且在一个循环（“恢复”）之后，幻灯片开始更改图像，而不管我设置的超时时间？

这是 html 代码（我无法更改）：

 <div class="inner homeSlider">
     <div class="img-wrap">
     <!-- image list for the slideshow  -->
    <a href="http://asdasd" target="_self">
     <img src="image1.jpg" alt="" border="0" />
    </a>

        <a href="http://www.google.com" target="_self">
      <img src="image2.jpg" alt="" border="0" />
    </a>

        <a href="http://www.atcom.gr" target="_blank">
    <img src="image3.jpg" alt="" border="0" />
    </a>
    </div>


    <-- following elements will have to be used as the 'pager' for jquery cycle -->
    <ul class="feature">
        <li id="hSlider-1" class="selected">
          <dl>
            <dt><a href="http://example.com" target="_self">PAGE 1</a></dt>
            <dd><a href="http://example.com" target="_self">some text</a></dd>
          </dl>
        </li>
        <li id="hSlider-2" class="selected">
            <dl>
            <dt><a href="http://www.google.com" target="_self">PAGE 2</a></dt>
            <dd><a href="http://www.google.com" target="_self">some text</a></dd>
            </dl>
        </li>

                <li id="hSlider-3" class="selected">
           <dl>
             <dt><a href="http://www.google.com" target="_blank">PAGE 3</a></dt>
             <dd><a href="http://www.google.com" target="_blank">some text</a></dd>
           </dl>
        </li>
    </ul>
</div>

JavaScript

var cycleTimeOut = 5000;
    var cycleSpeed = 500;
    var ispaused = false;

    function setSelectedPager(slideIndex){ 
            var idStr = 'hSlider-' + (slideIndex+1);
            $('div.homeSlider ul.feature li').removeClass('selected');
            $('div.homeSlider ul.feature li#' + idStr).toggleClass('selected');
    }

    function aftercallBack(currSlideElement, nextSlideElement, options, forwardFlag) { 
        if(!isNaN(options.currSlide) && !ispaused) {    
            setSelectedPager(options.currSlide);            
        }
    }

    var jqcycle = $('div.homeSlider div.img-wrap').cycle({
    fx:'fade', 
    speed:cycleSpeed, 
    timeout:cycleTimeOut,
    pause:1,
    after:aftercallBack 
    });

    /* On mouse over/out the pager must pause/resume the slide show and set the 
       appropriate CSS class
    */
    $('div.features div.homeSlider ul.feature li').mouseover(function(e){ 

            var id = $(this).attr('id');
            var parts = id.split('-');
            var slideIndex = (!isNaN(parts[1])) ? parts[1] : 1;

            if(!ispaused){ 
                $('div.homeSlider div.img-wrap').cycle('pause');                
                $('div.homeSlider div.img-wrap').cycle(slideIndex-1);       
                setSelectedPager(slideIndex);
                ispaused = true;
            }
    });

    $('div.features div.homeSlider ul.feature li').mouseout(function(e){ 

            var id = $(this).attr('id');
            var parts = id.split('-');
            var slideIndex = (!isNaN(parts[1])) ? parts[1] : 1;

            if(ispaused) { 
                $('div.inner ul.feature li#' + id).removeClass('selected'); 
                $('div.homeSlider div.img-wrap').cycle('resume');

                ispaused = false;
            }
    });

Answer 1

我不知道这是否直接导致您的时间问题，但我认为您的toggleClass 和removeClass 的执行顺序可能有问题。我会尝试将当前幻灯片作为aftercallBack 中标识的变量传递：

function aftercallBack(currSlideElement, nextSlideElement, options, forwardFlag) { 
    if(!isNaN(options.currSlide) && !ispaused) {    
        var toRemove = $(".selected");
        setSelectedPager(options.currSlide, toRemove);            
    }
}

function setSelectedPager(slideIndex, removeFrom) {
    var idStr = 'hSlider-' + (slideIndex+1);
        removeFrom.removeClass('selected');
        $('div.homeSlider ul.feature li#' + idStr).toggleClass('selected');
}