Question

我有这段代码：

var current = 0,
    slides = document.getElementsByClassName("slider");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
}, 4000);

基本上遍历我的HTML，在每个图层之间使用“滑块”类进行交叉渐变，按顺序：slide [0]，幻灯片1等，每个交叉淡入淡出之间有4秒的暂停。然后从头开始循环。

现在我想扩展此功能以应用于3个不同的容器，每个容器内部都有不同数量的层，我希望3个交叉渐变同时启动并按顺序运行。我的意思是，我不希望它像这样：

group01[0] -> group01[1] -> group01[2] -> group02[0] -> group02[1] -> group02[2]

我希望它像这样：

group01[0] -> group01[1] -> group01[2]
group02[0] -> group02[1] -> group02[2] -> group02[3]
group03[0] -> group03[1]

（所以，一切都在同一时间开始，一些容器的层数比其他容器多 - 然后从头开始循环）

我尝试将代码转换为可重用的函数，我将图层组作为参数，但没有运气，控制台不会抛出任何错误：

var group01 = document.getElementById("group01").getElementsByClassName("slider");
var group02 = document.getElementById("group02").getElementsByClassName("slider");
var group03 = document.getElementById("group03").getElementsByClassName("slider");

var timer01 = setInterval(doSlider(group01), 4000);
var timer02 = setInterval(doSlider(group02), 4000);
var timer03 = setInterval(doSlider(group03), 4000);

function doSlider(slides) {
    var current = 0;
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
};

我做错了什么？

编辑 - 完整代码（请点击此处！：https://codepen.io/mrmerrick/pen/NbwgYo）

HTML

<div class="wrapper">

  <div id="group01" class="sliderWrapper">
    <div class="slider slider01">
    </div>
    <div class="slider slider02">
    </div>
    <div class="slider slider03">
    </div>
    <div class="slider slider04">
    </div>
    <img src="https://i.imgur.com/3L2LSoT.png" alt="transparent placeholder">
  </div>

  <div id="group02" class="sliderWrapper">
    <div class="slider slider01">
    </div>
    <div class="slider slider02">
    </div>
    <div class="slider slider03">
    </div>
    <img src="https://i.imgur.com/3L2LSoT.png" alt="transparent placeholder">
  </div>

  <div id="group03" class="sliderWrapper">
    <div class="slider slider01">
    </div>
    <div class="slider slider02">
    </div>
    <div class="slider slider03">
    </div>
    <img src="https://i.imgur.com/3L2LSoT.png" alt="transparent placeholder">
  </div>

</div>

CSS

body {
  margin: 0;
  width: 100%;
}


.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  height: 100vh;
}

    .sliderWrapper  {
            position: relative;
            width: 90%;
            height: auto;
            text-align: center;
        }

            .sliderWrapper img {
                width: 100%;
            }

            .slider {
                position: absolute;

                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

                transition: opacity .5s ease-in;
            }

            .slider + .slider {
                opacity: 0;
            }

            #group01 .slider01 {
                background: url(http://placehold.it/792x1599?text=group01+slide01) center center no-repeat;
                background-size: contain;
                z-index: 5;
            }

            #group01 .slider02 {
                background: url(http://placehold.it/792x1599?text=group01+slide02) center center no-repeat;
                background-size: contain;
                z-index: 6;
            }

            #group01 .slider03 {
                background: url(http://placehold.it/792x1599?text=group01+slide03) center center no-repeat;
                background-size: contain;
                z-index: 7;
            }

            #group01 .slider04 {
                background: url(http://placehold.it/792x1599?text=group01+slide04) center center no-repeat;
                background-size: contain;
                z-index: 8;
            }

            #group02 .slider01 {
                background: url(http://placehold.it/792x1599?text=group02+slide01) center center no-repeat;
                background-size: contain;
                z-index: 9;
            }

            #group02 .slider02 {
                background: url(http://placehold.it/792x1599?text=group02+slide02) center center no-repeat;
                background-size: contain;
                z-index: 10;
            }

            #group02 .slider03 {
                background: url(http://placehold.it/792x1599?text=group02+slide03) center center no-repeat;
                background-size: contain;
                z-index: 11;
            }


            #group03 .slider01 {
                background: url(http://placehold.it/792x1599?text=group03+slide01) center center no-repeat;
                background-size: contain;
                z-index: 12;
            }

            #group03 .slider02 {
                background: url(http://placehold.it/792x1599?text=group03+slide02) center center no-repeat;
                background-size: contain;
                z-index: 13;
            }

            #group03 .slider03 {
                background: url(http://placehold.it/792x1599?text=group03+slide03) center center no-repeat;
                background-size: contain;
                z-index: 14;
            }

JS

var group01 = document.getElementById("group01").getElementsByClassName("slider");
var group02 = document.getElementById("group02").getElementsByClassName("slider");
var group03 = document.getElementById("group03").getElementsByClassName("slider");

var timer01 = setInterval(doSlider(group01), 4000);
var timer02 = setInterval(doSlider(group02), 4000);
var timer03 = setInterval(doSlider(group03), 4000);

function doSlider(slides) {
    var current = 0;
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
};

Answer 1

您每次current拨打0时都会将setInterval设置为doSlider，这意味着您只会看到slides[1]。您应该关闭current和slides，然后在current每次调用时增加setInterval。像这样：

var group01 = document.getElementById("section01").getElementsByClassName("slider");
var group02 = document.getElementById("section02").getElementsByClassName("slider");
var group03 = document.getElementById("section03").getElementsByClassName("slider");

var slider01 = doSlider(group01);
var slider02 = doSlider(group02);
var slider03 = doSlider(group03);

var timer01 = setInterval(slider01.next, 4000);
var timer02 = setInterval(slider02.next, 4000);
var timer03 = setInterval(slider03.next, 4000);

function doSlider(slides) {
  var current = 0;
  slides[0].style.opacity = 1;
  for (var i = 1; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  return {
    next: function() {
      slides[current].style.opacity = 0;
      current = (current != slides.length - 1) ? current + 1 : 0;
      slides[current].style.opacity = 1;
    }
  };
}

（希望这可行或至少引导您找到正确的答案。我没有测试过。）

Crossfade幻灯片与单独容器层之间的香草js

1 个答案: