Question

我正在使用jquery循环进行幻灯片放映。我无法更改给定的html代码，并且pager中的元素（如下所示的li html元素）必须暂停并恢复鼠标悬停和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');
}

暂停/恢复事件后的jQuery循环问题（自定义分页器）

1 个答案: