javascript - 没有 jQuery 的 CSS 和 javaScript 幻灯片动画，类似于 jQuery Cycle 2？

Question

关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。












我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。


2年前关闭。







Improve this question




几年来我一直在使用 jQuery Cycle 2，想知道是否有一种方法可以在不需要 jQuery 的情况下完成大部分工作？ http://jquery.malsup.com/cycle2/faq/

这是一个基本的 css 淡入/淡出循环过渡。

    var actual = 0;
    var total = 3;

    function addClass(elem, name) {
        elem.className = elem.className + " " + name;
    }

    function deleteClass(elem, name) {
        var c = elem.className;
        elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, "");
    }

    function nextImg() {
        var e;

        e = document.getElementById("img" + actual);
        deleteClass(e, "visible");

        actual++;
        if (actual > total - 1) actual = 0;

        e = document.getElementById("img" + actual);
        addClass(e, "visible");
    }

    var slider = setInterval(nextImg, 3000);

    .slide {
        border: none; 
        opacity: 0; 
        position: absolute; 
        top: 0; 
        left: 0;
        -webkit-transition: opacity .300s linear;
        -moz-transition: opacity .300s linear;
        -o-transition: opacity .300s linear;
        transition: opacity .300s linear;
    }
    .visible {
        opacity: 1;
    }

    <div class="header">
    <span id="img0" class="slide visible"><img src="1.jpg">Orlandos studio</span>
    <span id="img1" class="slide"><img src="2.jpg">Fida in Van</span>
    <span id="img2" class="slide"><img src="3.jpg">Eternalife Productions</span>
    </div>

Answer 1

我确信有一种更短的方法可以做到这一点，但是，这是我的看法。做同样的操作，只是稍微短一点。

var parent = document.getElementsByClassName("header")[0];
let i = 1;
let l = parent.children.length;

function imgCycle() {

  let pre = parent.children[((i - 1) < 0) ? l - 1 : i - 1]; // get previous holder of visible
  pre.className = pre.className.replace("visible", "");

  let e = parent.children[i];
  e.className += "visible";

  i = (i + 1) % l; // Make it loop around
}

var slider = setInterval(imgCycle, 3000);

.slide {
  border: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity .300s linear;
  -moz-transition: opacity .300s linear;
  -o-transition: opacity .300s linear;
  transition: opacity .300s linear;
}

.visible {
  opacity: 1;
}

<div class="header">
  <span id="img0" class="slide visible"><img src="1.jpg">Orlandos studio</span>
  <span id="img1" class="slide"><img src="2.jpg">Fida in Van</span>
  <span id="img2" class="slide"><img src="3.jpg">Eternalife Productions</span>
</div>