Проблема с циклом jQuery после событий паузы / возобновления (пользовательский пейджер) - PullRequest
Новая
       7

Проблема с циклом jQuery после событий паузы / возобновления (пользовательский пейджер)

1 голос
/ 12 января 2012

Я использую цикл 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;
            }
    });

1 Ответ

0 голосов
/ 12 января 2012

Я не знаю, является ли это причиной вашего времени, но я думаю, что у вас могут быть проблемы с порядком, в котором выполняются ваши 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');
}
...