D
D
Derick Wire2014-06-02 20:15:06
JavaScript
Derick Wire, 2014-06-02 20:15:06

A bug in the slider when switching browser tabs?

Such a problem, if you switch to another tab in the browser, and then return to the tab with the slider, it becomes frantic and flatters at breakneck speed, and it cannot be stopped, even mouseenter does not work, here is the script:

var slideWidth=1000;
var sliderTimer;
$(function(){
$('.slide:first .slidetext div').show();
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,3000);
    $('.viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,3000);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,3000);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,3000);
    });
});
$(".viewport").mouseenter(function () {
          clearInterval(theInt);
      }).mouseleave(function () {
          theInterval();
      });            

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        currentSlide=0;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},500,function(){
        //скрываем отыгранные тексты на всех слайдах
        $('.slide .slidetext div').hide();
        //отыгрываем эффект для текста на текущем слайде
        $('.slide:eq('+currentSlide+') .slidetext div').each(function(){
            $(this).show();
            $(this).data('width',$(this).width());
            $(this).css({overflow: 'hidden',width: 0}).animate({width: $(this).data('width')},500);
        });
    }).data('current',currentSlide);
}

function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        currentSlide=$('.slidewrapper').children().size()-1;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},500,function(){
        //скрываем отыгранные тексты на всех слайдах
        $('.slide .slidetext div').hide();
        //отыгрываем эффект для текста на текущем слайде
        $('.slide:eq('+currentSlide+') .slidetext div').each(function(){
            $(this).show();
            $(this).data('width',$(this).width());
            $(this).css({overflow: 'hidden',width: 0}).animate({width: $(this).data('width')},500);
        });
    }).data('current',currentSlide);
}


and html
<div class="viewport">
    <ul class="slidewrapper" data-current=0>
        <li class="slide">
      <div class='slidetext'>
        <div>::текст</div>
        <div>/ текст</div> 
        <div>текст</div>  
      </div>
      <a href="#"><img src="images/img-1.jpg"></a>
        </li>
        <li class="slide">
      <div class='slidetext'>
        <div>::текст</div>
        <div>/ текст</div> 
        <div>текст</div>  
      </div>
            <a href="#"><img src="images/img-2.jpg"></a>
        </li>
        <li class="slide">
      <div class='slidetext'>
        <div>::текст</div>
        <div>/ текст</div> 
        <div>текст</div>  
      </div>
            <a href="#"><img src="images/img-3.jpg"></a>
        </li>
    </ul>
<a href='javascript: void(0)' id='prev_slide' class='prev_s'></a>
<a href='javascript: void(0)' id='next_slide' class='next_s'></a>
</div>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ilya Lesnykh, 2014-06-03
@Aliance

@mmetro
Java.jpg

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question