Слайдер-шоу не работает, как кажется, не может найти проблему - PullRequest
Новая
       4

Слайдер-шоу не работает, как кажется, не может найти проблему

1 голос
/ 19 сентября 2019

Я хочу создать слайд-шоу из нескольких элементов div в контейнере.по какой-то причине слайдер все испортил.Буду признателен за любую помощь с этим. 

$('[class^=show]').fadeOut(0)

var curClass = 3
var className = 'show-'
var fadeTime = 1000
var showTime = 3000
var cycleTime = (fadeTime * 2 + showTime) * (curClass + 1);
setInterval(function() {
  for (var i = 0; i <= curClass; i++) {
    cls = '.' + className + i;
    // $(cls).fadeIn(fadeTime).delay(showTime).fadeOut(fadeTime);
    $(cls).fadeIn(fadeTime, function() {
      sleep(showTime);
      $(cls).fadeOut(fadeTime);
    });
  }
}, cycleTime);

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds) {
      break;
    }
  }
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <div class="show-0">Hey 0</div>
  <div class="show-1">Hey 1</div>
  <div class="show-2">Hey 2</div>
  <div class="show-3">Hey 3</div>
</div>

ползунок должен показывать каждый раз по одному классу 'show-X' в порядке, плавно переходя и исчезая.

1 Ответ

0 голосов
/ 19 сентября 2019

Пожалуйста, смотрите следующее: 

 $(document).ready(function () {

            $('[class*=show-]').fadeOut(0);

            var curClass = 3
            var className = 'show-'
            var fadeTime = 500
            var showTime = 1000
            var cycleTime = [(fadeTime * 2 + showTime) * (curClass + 1)] / 4;
            var i = 0;
            console.log(cycleTime);

            setInterval(function () {
                $('.' + className + i).fadeIn(fadeTime, function () {
                    //sleep(showTime);
                    try {
                        if (i == 0) { $('.' + className + curClass).fadeOut(fadeTime); } else { $('.' + className + (i-1)).fadeOut(fadeTime); }
                        
                    } catch (e) { }
                });
                if (i == 3) { i = 0; } else { i++; }

            }, showTime);
        });

        function sleep(milliseconds) {
            var start = new Date().getTime();
            for (var i = 0; i < 1e7; i++) {
                if ((new Date().getTime() - start) > milliseconds) {
                    break;
                }
            }
        }
.container div {
            height: 50px;
            width: 50px;
            background: red;
            color: white;
        }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
        <div class="show-0">Hey 0</div>
        <div class="show-1">Hey 1</div>
        <div class="show-2">Hey 2</div>
        <div class="show-3">Hey 3</div>
    </div>
...