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

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>

​

Answer 2

检出以下库：

我还没有试过，但是有很多功能，可能对你有用！

• https://github.com/ganlanyuan/tiny-slider
• https://github.com/gsantiago/vanilla-slider
• https://github.com/turivishal/Slide-Projection-Vanilla-JS/tree/0.0.1

在过去的两天里，我一直在研究这个Slide-Projection-Vanilla-JS库，并且像JQuery Cycle 2一样做了一些基本的事情。

目前还没有任何文档或自述文件，我将很快添加它，但我已经添加了所有类型的示例以供随时使用。

以下是与Cycle 2库相关的功能，有关更多详细信息，请查看GitHub Repository。

悬停时自动播放下一个/上一个Controls

• Pause Controls

• Caption Controls

• Manual Fx Controls

• Overlay Options

• Speed选项

• 自动播放选项

演示：

​

.center {
    text-align: center;
}

#pauser {
    width: 45%;
    padding: 30px;
    margin: auto;
    text-align: center;
    font-size: 16px
}

.info {
    padding: 5px 2px;
    color: #9B4D39;
    background: #FCE9E3;
    border: solid 1px #FBE1D5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/turivishal/Slide-Projection-Vanilla-JS@0.0.1/build/slide-projection.styles.min.css">
<h3 class="center">Slide Projection (SP)</h3>
<div class="sp-wrapper">
    <div 
        class="sp-slideshow" 

        data-sp-speed="4000"
        data-sp-auto-play="true"

        data-sp-fx="slide" 
        data-sp-fx-next="next-slide"
        data-sp-fx-prev="prev-slide"
        data-sp-fx-active="active-slide"
        data-sp-fx-initial="initial-slide"

        data-sp-caption-template="Slide {{slideNum}} of {{slideCount}}">

        <!-- empty element for caption -->
        <div class="sp-caption"></div>
        <div class="sp-overlay"></div>

        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat risus bibendum, luctus nunc et, ultricies mauris. Pellentesque sagittis euismod urna">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/Slide-Projection-Vanilla-JS@0.0.1/demos/images/sp1.jpg" alt="SP1" />
        </div>
        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/Slide-Projection-Vanilla-JS@0.0.1/demos/images/sp2.jpg" alt="SP2" />
        </div>
        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/Slide-Projection-Vanilla-JS@0.0.1/demos/images/sp3.jpg" alt="SP3" />
        </div>
        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/Slide-Projection-Vanilla-JS@0.0.1/demos/images/sp4.jpg" alt="SP4" />
        </div>
        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/Slide-Projection-Vanilla-JS@0.0.1/demos/images/sp5.jpg" alt="SP5" />
        </div>

        <div class="sp-button-next"></div>
        <div class="sp-button-prev"></div>

    </div>

</div>

<script src="https://cdn.jsdelivr.net/gh/turivishal/Slide-Projection-Vanilla-JS@0.0.1/build/slide-projection.vanilla.min.js"></script>

​

Answer 3

你见过slendr吗，它相对较小且可扩展。

特性

完全使用Typescript.

• Lightweight (仅2KB压缩的UMD)

• Responsive (桌面和移动)，仅通过default.

• Modern浏览器)编写和测试的
• 。不再有像IE10或IE11这样的传统浏览器(但你可以在灯塔release).
• High加速60fps animation.
• Progressive图像loading.
• Highly customizable.
• SASS支持的v1.3 audit.
• CSS3
• Hardware性能上找到它。

它使用了最少的标记...

<div class="slendr-slides">
    <section class="slendr-slide" data-slide-src="image1.jpg"></section>
    <section class="slendr-slide"></section>
    <section class="slendr-slide" data-slide-src="image2.jpg"></section>
</div>

查看codepen上的演示