首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >带有自动播放的滑块以及带有CSS HTML JS的下一个和上一个箭头

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

Stack Overflow用户
提问于 2018-06-03 17:37:53
回答 1查看 2.5K关注 0票数 0

我是一个初学者,我想知道是否有可能创建一个响应滑块与自动播放(淡入淡出或滑动效果,无关紧要)和导航的下一个和上一个箭头,而不影响自动播放,只是从一个幻灯片更改到另一个。

我已经尝试了在网上找到的多种js解决方案,比如javascript的"setinterval“函数,但我总是遇到同样的问题,一个效果有效,另一个效果无效。

实际上,我已经用html和css做了一个滑块,但是我不能通过添加一个javascript函数来完成。

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

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

能做到吗??

提前谢谢你!

代码语言:javascript
复制
    /*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;
    }
代码语言:javascript
复制
    <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>

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50665020

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档