JQuery -Zyklus -Problem nach Pause/Lebenslaufereignisse (benutzerdefinierter Pager)

Question

Ich benutze JQuery Cycle für eine Diashow. Ich kann den angegebenen HTML -Code nicht ändern und die Elemente im Pager (li HTML -Elemente, wie sie unten gesehen) innehalten und die Diashow bei Mausover- und Mausout -Ereignissen wieder aufnehmen.

Das Verhalten wird implementiert, aber wenn dann die Diashow angehalten wird und dann wieder aufgenommen wird, ändern die Bilder jede Sekunde (?) Und dann in zufälligen Intervallen -, während ich einen 5 -Sekunden -Zeitübergang angegeben habe.

Jemand weiß, was das Problem zu verursachen scheint, und nach einem Zyklus ('Lebenslauf') beginnt die Diashow zu ändern, die die von mir festgelegte Zeitüberschreitung ignorieren?

Hier ist der HTML -Code (den ich nicht ändern kann):

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

Das 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

Ich weiß nicht, ob es direkt Ihr Timing -Problem verursacht, aber ich denke, Sie haben möglicherweise ein Problem mit der Reihenfolge, in der Ihre toggleClass und removeClass werden ausgeführt. Ich würde versuchen, die aktuelle Folie als in Ihrem identifizierte Variable zu übergeben 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');
}