Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.12.2015, 19:14
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

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>
Ответить с цитированием
  #2 (permalink)  
Старый 06.12.2015, 14:14
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

Помогите пожалуйста
Ответить с цитированием
  #3 (permalink)  
Старый 07.12.2015, 10:07
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

Никого нету?
Ответить с цитированием
  #4 (permalink)  
Старый 07.12.2015, 10:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 07.12.2015, 14:59
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

Спасибо большое, а почему глючил можете рассказать вкратце?
Ответить с цитированием
  #6 (permalink)  
Старый 07.12.2015, 16:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Cdelphi78,
не используйте по возможности никогда setInterval и не инициализируйте дважды одно и тоже и учитывайте видимость переменных.
Ответить с цитированием
  #7 (permalink)  
Старый 07.12.2015, 16:41
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

Сообщение от рони Посмотреть сообщение
Cdelphi78,
не используйте по возможности никогда setInterval и не инициализируйте дважды одно и тоже и учитывайте видимость переменных.
Ничего не понял, но спасибо.
Ответить с цитированием
  #8 (permalink)  
Старый 07.12.2015, 16:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Cdelphi78,
Сообщение от Cdelphi78
не инициализируйте дважды одно и тоже
строка 10 и строка 46 пост 1
Сообщение от Cdelphi78
учитывайте видимость переменных.
откутда возникнут данные в строке 21?
Сообщение от рони
никогда setInterval
перешли на другую вкладку , на этой возникла пулемётная очередь при возвращении фокуса на эту страницу, именно поэтому браузеры стали останавливать setInterval на неактивной вкладке (не все)
Ответить с цитированием
  #9 (permalink)  
Старый 07.12.2015, 17:01
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

рони, код брал отсюда http://htmler.ru/2013/09/03/slider-na-jquery/
и отсюда http://htmler.ru/2013/10/02/slider-na-jquery-chast-2/
Ответить с цитированием
  #10 (permalink)  
Старый 07.12.2015, 17:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Cdelphi78,
есть много новых слайдеров даже здесь на форуме -- автор писал его несколько лет назад, наверняка пиши он сейчас его код был-бы иной.
Сообщение от рони
учитывайте видимость переменных.
откутда возникнут данные в строке 21?
это было неправильно -- данные у вас есть (не заметил)
<ul class="slidewrapper" data-current="0">

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное появление картинки в ui slider - jQuery gazman jQuery 0 02.09.2015 23:44
Добавление mousewheel.js к jQuery UI slider Нарек jQuery 7 24.07.2014 00:10
jQuery UI Slider Mcqueen jQuery 2 03.10.2013 00:48
jQuery UI Range slider как заблокировать левый ползунок по первому клику Oleg_Pupkin jQuery 3 04.09.2013 13:44
jQuery UI Slider изменяет ширину ползунка SkaN2412 jQuery 1 26.11.2012 13:03