3

Есть кастомный слайдер, также есть т.н. автоматическое проигрывание слайдов (делал согласно своим умениям/знаниям и пожеланиям клиента). Нужно сделать так, чтобы при наведении на кнопки автоматическая прокрутка пропадала, а при mouseout снова возвращалась к своей работе. Как это сделать? Код ниже:

$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
    setTimeout(function () {

        if (loop) {
          number = i%(quantity);
            $("label").removeClass('active');
            $("label:eq(" + number + ")").trigger("click").addClass('active');
            changeTo(i+1);
        }
    }, 2000);
}
changeTo(0);

$( "label" ).on( "mouseover", function() {
loop = false;
  $("label").removeClass('active');
  $(this).addClass('active').trigger('click');
}).on('mouseout', function(){
  loop = true;
});

});
* {
  box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
 font-family: 'PT Sans', sans-serif;
}
.slider--block {
  max-width: 670px;
  display: block;
  margin: auto;
  background: #fff;
}

.active {
  color: red;
}

.image-section {
  display: none;
}
.image-section + section {
  height: 100%;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  opacity: .33;
  transition: 400ms;
  z-index: 1;
}

.image-section:checked + section {
  opacity: 1;
  transition: 400ms;
  z-index: 2;
}

.image-section + section figcaption {
  padding: 20px;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 18px;
  max-width: 50%;

}

.image-window {
  height: 367px;
  width: 100%;
  position: relative;
  overflow:hidden;
}

.slider-navigation--block {
  display: flex;
  border:1px solid;
  background: #1D1D1D;
  padding: 5px;
  z-index: 3;
  position: relative;
}
.slider-navigation--block label {
  background: #2C2C2C;
  padding: 20px;
  color: #fff;
  margin-right: 7px;
  flex: 1;
  cursor: pointer;
  text-align: center;
  position:relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height:100px;
  border-radius: 4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  font-weight: 600;

}

.slider-navigation--block label.active:before {
  content: "";
  position: absolute;
   top: -11px;
   transform: rotate(-135deg);
   border: 12px solid;
   border-color: transparent #537ACA #537ACA transparent;
   left: calc(50% - 12px);
   }

.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);

  }

.slider-navigation--block label:last-child {
  margin-right: 0;
}
img {
  max-width: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
  <div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
  <figcaption>
Hello, world! This is awesometext...
  </figcaption>
  <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
  <input class="image-section" id="in-2" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext about something else...
    </figcaption>
    <img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
  </section>
  <input class="image-section" id="in-3" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext again about something else...
    </figcaption>
    <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
  </section>
</div>

<div class="slider-navigation--block">
  <label class="active" for="in-1">AION [ру-офф]</label>
  <label for="in-2">Perfect World [ру-офф]</label>
  <label for="in-3">Lineage 2 [ру-офф]</label>
</div>



  </div>
</div>

2 ответа 2

1
  1. Используйте setInterval() вместо setTimeout()
  2. Используйте более конкретный селектор, вместо $("label"), которых на странице может быть очень много, пишите $(".slider-navigation--block label")
  3. И лучше не счетчики использовать по кол-ву слайдеров, а плясать от текущего активного, тогда при остановке и продолжении автопролистование начнется снова с места, где юзер наводил мышью.

Вот небольшой рефакторинг:

$(document).ready(function(){
    var animationDuration = 2000;

    function nextSlider() {
        var activeLabel = $('.slider-navigation--block label.active'),
            nextSlide = $(activeLabel).next();
        console.log(nextSlide);
        console.log(nextSlide.length);
        if(!nextSlide.length) {
            nextSlide = $('.slider-navigation--block label').first();
        }
        $(".slider-navigation--block label").removeClass('active');
        nextSlide.trigger("click").addClass('active');
    }
    var intervalId = setInterval(nextSlider, animationDuration);

    $( ".slider-navigation--block label" ).on( "mouseover", function() {
        clearInterval(intervalId);
        $(".slider-navigation--block label").removeClass('active');
        $(this).addClass('active').trigger('click');
    }).on('mouseout', function(){
        intervalId = setInterval(nextSlider, animationDuration);
    });

});
* {
  box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
 font-family: 'PT Sans', sans-serif;
}
.slider--block {
  max-width: 670px;
  display: block;
  margin: auto;
  background: #fff;
}

.active {
  color: red;
}

.image-section {
  display: none;
}
.image-section + section {
  height: 100%;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  opacity: .33;
  transition: 400ms;
  z-index: 1;
}

.image-section:checked + section {
  opacity: 1;
  transition: 400ms;
  z-index: 2;
}

.image-section + section figcaption {
  padding: 20px;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 18px;
  max-width: 50%;

}

.image-window {
  height: 367px;
  width: 100%;
  position: relative;
  overflow:hidden;
}

.slider-navigation--block {
  display: flex;
  border:1px solid;
  background: #1D1D1D;
  padding: 5px;
  z-index: 3;
  position: relative;
}
.slider-navigation--block label {
  background: #2C2C2C;
  padding: 20px;
  color: #fff;
  margin-right: 7px;
  flex: 1;
  cursor: pointer;
  text-align: center;
  position:relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height:100px;
  border-radius: 4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  font-weight: 600;

}

.slider-navigation--block label.active:before {
  content: "";
  position: absolute;
   top: -11px;
   transform: rotate(-135deg);
   border: 12px solid;
   border-color: transparent #537ACA #537ACA transparent;
   left: calc(50% - 12px);
   }

.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);

  }

.slider-navigation--block label:last-child {
  margin-right: 0;
}
img {
  max-width: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
  <div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
  <figcaption>
Hello, world! This is awesometext...
  </figcaption>
  <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
  <input class="image-section" id="in-2" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext about something else...
    </figcaption>
    <img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
  </section>
  <input class="image-section" id="in-3" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext again about something else...
    </figcaption>
    <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
  </section>
</div>

<div class="slider-navigation--block">
  <label class="active" for="in-1">AION [ру-офф]</label>
  <label for="in-2">Perfect World [ру-офф]</label>
  <label for="in-3">Lineage 2 [ру-офф]</label>
</div>



  </div>
</div>

1
  • Отличное решение. Займусь его изучением. Спасибо огромное!
    – NeedH8
    19 дек 2015 в 19:48
1

Если не заниматься переписыванием всего вашего кода, а только дополнить необходимым функционалом, то можно так:

$(document).ready(function() {
  var quantity = $('input[type="radio"]').length,
    label = $("label"),
    timer,
    indx = 0;

  function changeTo(i) {
    label.removeClass('active')
      .eq(i % quantity).trigger('click').addClass('active');
    timer = setTimeout(changeTo, 2000, ++i);
  };
  changeTo(indx);

  label.on('mouseenter', function() {
    label.not(this).removeClass('active');
    indx = $(this).trigger('click').addClass('active').index();
    clearTimeout(timer);
  });
  $(".slider-navigation--block").on('mouseleave', function(){
  	changeTo(indx);
  });
});
* {
  box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
 font-family: 'PT Sans', sans-serif;
}
.slider--block {
  max-width: 670px;
  display: block;
  margin: auto;
  background: #fff;
}

.active {
  color: red;
}

.image-section {
  display: none;
}
.image-section + section {
  height: 100%;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  opacity: .33;
  transition: 400ms;
  z-index: 1;
}

.image-section:checked + section {
  opacity: 1;
  transition: 400ms;
  z-index: 2;
}

.image-section + section figcaption {
  padding: 20px;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 18px;
  max-width: 50%;

}

.image-window {
  height: 367px;
  width: 100%;
  position: relative;
  overflow:hidden;
}

.slider-navigation--block {
  display: flex;
  border:1px solid;
  background: #1D1D1D;
  padding: 5px;
  z-index: 3;
  position: relative;
}
.slider-navigation--block label {
  background: #2C2C2C;
  padding: 20px;
  color: #fff;
  margin-right: 7px;
  flex: 1;
  cursor: pointer;
  text-align: center;
  position:relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height:100px;
  border-radius: 4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  font-weight: 600;

}

.slider-navigation--block label.active:before {
  content: "";
  position: absolute;
   top: -11px;
   transform: rotate(-135deg);
   border: 12px solid;
   border-color: transparent #537ACA #537ACA transparent;
   left: calc(50% - 12px);
   }

.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);

  }

.slider-navigation--block label:last-child {
  margin-right: 0;
}
img {
  max-width: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
  <div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
  <figcaption>
Hello, world! This is awesometext...
  </figcaption>
  <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
  <input class="image-section" id="in-2" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext about something else...
    </figcaption>
    <img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
  </section>
  <input class="image-section" id="in-3" type="radio" name="sec-1">
  <section>
    <figcaption>
  Hello, world! This is awesometext again about something else...
    </figcaption>
    <img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
  </section>
</div>

<div class="slider-navigation--block">
  <label class="active" for="in-1">AION [ру-офф]</label>
  <label for="in-2">Perfect World [ру-офф]</label>
  <label for="in-3">Lineage 2 [ру-офф]</label>
</div>



  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.