Javascript-форум - Slider глючит

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Slider глючит (https://javascript.ru/forum/events/59990-slider-glyuchit.html)

Slider глючит

Всем привет! Нашел скрипт для слайдера, подправил, и теперь у него какие то глюки, вначале все нормально правда на последнем слайде задержку не делает, кстати время прокрутки поставил большое но почему то все равно быстро крутит, так вот через некоторое время сам начинает крутить без остановок, стрелки не работают, а и не работает функция остановки слайдера при наведении мыши, хотя раньше работала.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Document</title>
     <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
       <script>
           var slideWidth=980;
var sliderTimer;
$(function() {
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,10000);
    $('#slider').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,10000);
    });
});
 
function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        currentSlide=0;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},980).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},980).data('current',currentSlide);
}
 
 
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,20000);
    $('#slider').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,1000);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,6000);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,6000);
    });
});
</script>
   
    <style>
   #slider  {
    width: 977px;
    height: 300px;
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(75, 77, 97,0.6);
}
 
 .slidewrapper{
    position: absolute;
    width:3000px;
    left: 0;
    top: 0;
    height: 300px;
    margin: 0;
    padding: 0;  
     
}
 
.slidewrapper .slide1 {
    
    width:980px;
    height:300px;
    float:left;
    list-style-type: none;
    
}
 
.slidewrapper .slide2 {
    
    float:left;
}
 
#slider .arrows {
    top:50%;
}
 
 
 
#slider #prev_slide {
    z-index: 10000;
    position: absolute;
    left:0;
    margin-top:-25px;
    font-size:40px;
}
 
 
#slider #next_slide {
    z-index: 10000;
    position: absolute;
    right:0;
    margin-top:-25px;
    font-size:40px;
}
 
 
 
    </style>
 </head>
<body>
    <div id="slider">
           
           <ul class="slidewrapper" data-current="0">
              
               <li class="slide1"><img src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
               <li class="slide2"><img src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
               <li class="slide3"><img src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
               
           </ul>
 <a href="javascript: void(0)" id="prev_slide" class="arrows"><</i></a>          
<a href="javascript: void(0)" id="next_slide" class="arrows">></i></a>
 
           
           </div>
</body>
</html>

Помогите пожалуйста

Никого нету?

Cdelphi78,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Document</title>
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script>
var slideWidth = 980,
    sliderTimer, currentSlide = 0, len;

function nextSlide() {
    currentSlide++;
    if (currentSlide >= len) currentSlide = 0;
    $(".slidewrapper").animate({
        left: -currentSlide * slideWidth
    }, 800)
}

function prevSlide() {
    currentSlide--;
    if (currentSlide < 0) currentSlide = len - 1;
    $(".slidewrapper").animate({
        left: -currentSlide * slideWidth
    }, 800)
}
$(function() {
    len = $(".slidewrapper").children().length
    $(".slidewrapper").width(len * slideWidth);
    sliderTimer = setInterval(nextSlide, 3000);
    $("#slider").on({
        mouseenter: function() {
            clearInterval(sliderTimer)
        },
        mouseleave: function() {
            sliderTimer = setInterval(nextSlide, 3000)
        }
    });
    $("#next_slide").click(function(event) {
        event.preventDefault();
        clearInterval(sliderTimer);
        nextSlide()
    });
    $("#prev_slide").click(function(event) {
        event.preventDefault();
        clearInterval(sliderTimer);
        prevSlide()
    })
});
</script>

    <style>
   #slider  {
    width: 977px;
    height: 300px;
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(75, 77, 97,0.6);
}

 .slidewrapper{
    position: absolute;
    width:3000px;
    left: 0;
    top: 0;
    height: 300px;
    margin: 0;
    padding: 0;

}

.slidewrapper .slide1 {

    width:980px;
    height:300px;
    float:left;
    list-style-type: none;

}

.slidewrapper .slide2 {

    float:left;
}

#slider .arrows {
    top:50%;
    text-decoration: none;
}



#slider #prev_slide {
    z-index: 10000;
    position: absolute;
    left:0;
    margin-top:-25px;
    font-size:40px;
}


#slider #next_slide {
    z-index: 10000;
    position: absolute;
    right:0;
    margin-top:-25px;
    font-size:40px;
}



    </style>
 </head>
<body>
    <div id="slider">

           <ul class="slidewrapper" data-current="0">

               <li class="slide1"><img src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
               <li class="slide2"><img src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
               <li class="slide3"><img src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>

           </ul>
 <a href="javascript: void(0)" id="prev_slide" class="arrows"><</a>
<a href="javascript: void(0)" id="next_slide" class="arrows">></a>


           </div>
</body>
</html>

Спасибо большое, а почему глючил можете рассказать вкратце?

Cdelphi78,
не используйте по возможности никогда setInterval и не инициализируйте дважды одно и тоже и учитывайте видимость переменных.

Цитата:

Сообщение от рони (Сообщение 399020)

Ничего не понял, но спасибо.

Cdelphi78,

Цитата:

Сообщение от Cdelphi78

не инициализируйте дважды одно и тоже

строка 10 и строка 46 пост 1

Цитата:

Сообщение от Cdelphi78

учитывайте видимость переменных.

откутда возникнут данные в строке 21?

Цитата:

Сообщение от рони

никогда setInterval

перешли на другую вкладку , на этой возникла пулемётная очередь при возвращении фокуса на эту страницу, именно поэтому браузеры стали останавливать setInterval на неактивной вкладке (не все)

Cdelphi78,
есть много новых слайдеров даже здесь на форуме -- автор писал его несколько лет назад, наверняка пиши он сейчас его код был-бы иной.

Цитата:

Сообщение от рони

учитывайте видимость переменных.
откутда возникнут данные в строке 21?

это было неправильно -- данные у вас есть (не заметил)

<ul class="slidewrapper" data-current="0">

но можно не терзать атрибут дата на запись чтение -- когда можно просто сделать переменную currentSlide