如何实现带有自动播放功能的滑块以及带有CSS HTML JS的下一个和前一个箭头?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (148)

是否可以使用自动播放(淡入淡出或幻灯片效果,无需任何操作)创建一个响应滑块,以及用于导航的下一个和上一个箭头,而不会影响自动播放,只需从一个幻灯片更改为另一个幻灯片。

已经尝试过使用javascript在网上找到的多个js解决方案,例如“setinterval”函数,但我总是遇到同样的问题: 其中一个效果不起作用。

我已经做了一个滑块在HTML和CSS,但不能通过添加一个JavaScript函数来完成。

即使只有js才有可能,可以接受所有的解决方案。

可以这样做吗?

    /*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;
    }

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

提问于
用户回答回答于

不需要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;}

然后:

window.addEventListener("load",function(){
    let timer; let delay = 4000;
    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

        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函数时,都会选择下一个或上一个要检查的输入,并根据当前选中的输入进行检查。所以你可以从定时器或不定时调用它,没有任何区别。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励