Question

我是初学者，我想知道是否可以创建具有自动播放功能的响应式滑块（淡入淡出或滑动效果，无关紧要）以及导航的下一个和上一个箭头，而不会影响自动播放，只是从一张幻灯片转换到另一张幻灯片。

我已经尝试过在网上找到的多个js解决方案，例如＆＃34; setinterval＆＃34;用javascript函数，但我总是有同样的问题，一个效果有效，而另一个效果。

实际上我已经在html和css中做了一个滑块，但我无法通过添加javascript函数来完成这项工作。

我对所有解决方案持开放态度，即使只有js才有可能。

我现在正在学习一门课程，这是项目的一部分。

可以吗？

提前谢谢！

＆＃13;

    /*progress bar effect*/

    @keyframes loading {
      0% {
        transform: scaleX(0);
      }
      100% {
        transform: scaleX(100%);
      }
    }

    /*autoplay effect*/
    @keyframes fade {
      0% {
        opacity: 1
      }
      45% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
      95% {
        opacity: 0
      }
      100% {
        opacity: 1
      }
    }

    @keyframes fade2 {
      0% {
        opacity: 0
      }
      45% {
        opacity: 0
      }
      50% {
        opacity: 1
      }
      95% {
        opacity: 1
      }
      100% {
        opacity: 0
      }
    }


    /*Section slider*/

    .slider {
      width: 100%;
      height: 550px;
      margin: 20px auto;
      position: relative;
    }

    .slide1,
    .slide2 {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .slide1 {
      background: url('images/bg1.jpg') no-repeat center;
      background-size: cover;
      animation: fade 30000s infinite linear;
      -webkit-animation: fade 30000s infinite linear;
    }

    .slide2 {
      background: url('images/bg2.jpg') no-repeat center;
      background-size: cover;
      animation: fade2 30000ms infinite linear;
      -webkit-animation: fade2 30000ms infinite linear;
    }


    /*progress bar*/

    .progress-bar {
      position: absolute;
      bottom: -76px;
      left: 0px;
      height: 80px;
      width: 100%;
      background: color: rgba(192, 194, 192, 0.8);
      border-radius: 0 0 1px 1px;
      box-shadow: inset 0px 11px 14px -10px #737373, inset 0px -11px 8px -10px #CCC;
    }

    .loaded {
      height: 4px;
      width: 100%;
      background: #5cadd3;
      animation: 15000ms infinite linear loading normal;
      transform-origin: 0%;
    }


    /*Slider buttons left or right*/

    .slider #button_left {
      position: absolute;
      top: 45%;
      left: 0px;
      background-color: rgba(70, 70, 70, 0.6);
      width: 35px;
      height: 70px;
      border-radius: 0px 50px 50px 0px;
    }

    .slider #button_right {
      position: absolute;
      top: 45%;
      right: 0px;
      background-color: rgba(70, 70, 70, 0.6);
      width: 35px;
      height: 70px;
      border-radius: 50px 0px 0px 50px;
    }

    #button_left:hover,
    #button_right:hover {
      transition: .3s;
      background-color: rgba(99, 99, 99, 1);
      color: #ffffff;
    }


    /*left and right arrows for slider with font-awesome*/

    .fas.fa-chevron-left {
      position: absolute;
      left: 0;
      top: 30%;
      margin-left: 5px;
      color: #fff;
      font-size: 25px;
    }

    .fas.fa-chevron-right {
      position: absolute;
      right: 0;
      top: 30%;
      margin-right: 5px;
      color: white;
      font-size: 25px;
    }

＆＃13;

    <section id="slideshow">
      <div class='slider'>
        <div class='slide1'>
          <div class="text-slider">
            <h1><span class="textblue">WEBAGENCY</span>: lorem ipsum <br> lorem ipsum</h1>
            <p> lorem ipsum</p>
            <a href="#"> lorem ipsum</a>
          </div>
        </div>

        <div class='slide2'>
          <div class="text-slider">
            <h1><span class="textblue">WEBAGENCY</span>: lorem ipsum <br> lorem ipsum</h1>
            <p> lorem ipsum</p>
            <a href="#services"> lorem ipsum</a>
          </div>
        </div>
        <!--<div class="progress-bar"></div>-->
        <div class="progress-bar">
          <div class="loaded"></div>
        </div>
        <a href="images/bg1.jpg" id="button_left"><i class="fas fa-chevron-left"></i></a>
        <a href="images/bg2.jpg" id="button_right"><i class="fas fa-chevron-right"></i></a>
      </div>
    </section>

＆＃13;

Answer 1

不需要lib或框架来执行此操作。所以，我已经必须这样做了，它并不像看起来那么复杂。首先，我使用css伪类：选中并输入类型无线电以选择要显示的幻灯片：

<div id="slider">
    <input type="radio" name="slider" checked> <!-- The first slide is displayed by default -->
    <div class="slide">...</div>

    <input type="radio" name="slider">
    <div class="slide">...</div>
    ...

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

还有一点css：

#slider > .slide,
#slider > input[type="radio"]{
    display:none;
}
#slider > input[type="radio"]:checked + .slide{display:block;}

然后，js应该更简单：

window.addEventListener("load",function(){
    let timer; let delay = 4000;
    let loader = document.querySelector("#slider .loader");
    let inputs = Array.from(document.querySelectorAll('#slider > input[type="radio"]'));
    //first, the go function that choose which input to check
    let go = (prev=false)=>{
        let checked = document.querySelector('#slider > input[type="radio"]:checked');
        let index = inputs.indexOf(checked);

        let next = ((prev) ? index -1 : index + 1);
        if(next >= inputs.length) next = 0; //restart from beginning
        else if(next < 0 ) next = inputs.length -1; //go to the last slide

        //restart the progress bar
        loader.classList.remove("loader");
        loader.classList.add("loader");
        inputs[next].checked = true;

    };
    //Allow you to define some sort of recursive timeout, otherwise it works only once
    let defineTimer = (callback)=>{
        timer = setTimeout(()=>{
            callback();
            defineTimer(callback);
        },delay);
    };
    //next, autoplay :
    defineTimer(go);

    //next, buttons:
    let next = document.querySelector("#slider > .next-button");
    let prev = document.querySelector("#slider > .prev-button");

    //clear the timer with `clearTimeout` each time you click on a button, if you don't 
    //and the user click on a button 3900ms after the autoplay call, the next/prev slide will only be displayed 
    //for 100ms and then switch to the next, which can be disturbing for the user.
    next.addEventListener("click",()=>{
        go();
        clearTimeout(timer);
        defineTimer(go);
    });
    prev.addEventListener("click",()=>{
        go(true);
        clearTimeout(timer);
        defineTimer(go);
    });
});

为什么它应该有效：每次调用go函数时，它都会选择要检查的下一个或上一个输入，相应于当前选中的输入。所以你可以用计时器打电话给它，它没有任何区别。

希望它能回答你的问题:)

带有自动播放的滑块以及带有CSS HTML JS的下一个和上一个箭头

1 个答案: