javascript - slider 显示无法正常工作 - 似乎找不到问题

Question

我想创建一个由容器中的一些 div 组成的 slider 。由于某种原因， slider 把一切搞乱了。如果有任何帮助，我们将不胜感激。

$('[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>

slider 每次都应按顺序显示一类“show-X”，并很好地淡入和淡出。

Answer 1

请参阅以下内容:

 $(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>