带有 JavaScript 的滑块横幅答案

【问题标题】：Slider banner with JavaScript带有 JavaScript 的滑块横幅
【发布时间】：2020-03-05 11:52:22
【问题描述】：

有人可以向我解释一下如何仅使用 JavaScript（不是 jQuery）制作图像滑块吗？

我发现了许多解决此问题的问题，但难以理解答案并且无法使解决方案发挥作用。我的项目中有滑块，但它们没有动画。相反，它们是每三秒更改一次的图像。我希望图像每三秒向左滑动一次。谁能提供一些关于如何实现这一目标的建议？

我的 HTML：

<div class="eight columns all">
    <img id="img-slide">
    <!--<p>>></p> -->
</div>

CSS：

#img-slide{
    margin:15px;
    height: 95%;
    width:95%;
    border-radius:5px;
}

以及JS中的函数：

function slide1(){
    document.getElementById('img-slide').src="img/slide_1.jpg";
    setTimeout("slide2()", 2500);
}

function slide2(){
    document.getElementById('img-slide').src="img/slide_2.jpg";
    setTimeout("slide3()", 3000);
}

function slide3(){
    document.getElementById('img-slide').src="img/slide_3.jpg";
    setTimeout("slide1()", 3000);
}

谢谢。

【问题讨论】：

首先为javascript代码制定一些逻辑步骤，然后查找如何执行这些步骤，尝试实现它，然后在它中断时发布问题。所以看起来你不是在要求一个教程（这在 SO 上是不允许的）

标签： javascript html css

【解决方案1】：

我已经重做了你的逻辑来显示图像，注意我不是 css 专业人士，结果几乎是你想要的，图像退出到左侧但新图像也来自左侧，你可能想要调整 CSS 以使其按您的意愿工作。

Here is the jsfiddle

这里是html：

<div class="eight columns all slider">
    <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="hide">
    <img src="http://images.medicaldaily.com/sites/medicaldaily.com/files/2013/08/04/0/62/6259.jpg" class="hide">
    <img src="http://animalia-life.com/data_images/wallpaper/bunny/bunny-01.jpg" class="hide">
</div>

现在每张图片都有一个 img，注意添加到 div 的类滑块

现在对于 js，我将所有 img 放在滑块中，计算要显示的最后一个图像和第一个图像，然后将显示/隐藏类添加/删除到正确的元素。

//This is the latest img, it will serve to know wich img to hide
var old = listPict.length - 1;
//This will represent the current img to show
var current = 0;

//The timeout will recall this function every 3 sec
function loop() {
    //We set the class of the current img to show
    listPict[current].setAttribute('class', 'show');
    //We hide the last img
    listPict[old].setAttribute('class', 'hide');

    //Update the variables !
    old = current;
    current++;

    //If the current is bigger then the list of images, return to 0
    if (current === listPict.length)
        current = 0;

    //Recall every 3 sec
    //Note that we don't put () because we don't want to execute it right away
    setTimeout(loop, 3000);
}

loop();

现在我们需要添加 css 来进行转换！

<!-- I added position: absolute; -->
<!-- This allow me to use left -->
.slider img{
    margin:15px;
    height: 95%;
    width:95%;
    border-radius:5px;    
    position: absolute;
}

<!-- This show the current image with a transition -->
<!-- It replace the left attribute to 0 and the opacity to 1 -->
.slider img.show{
    opacity:1;
    left: 0px;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;

}

<!-- This hide the current image with a transition -->
<!-- It move the image to the left and the opacity to 0 -->
.slider img.hide{
    left: -1000px;
    opacity: 0;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}

【讨论】：

【解决方案2】：

我认为，如果您对逻辑感到困惑并想要一种非常简单的方法来使用图像滑块，您应该使用 bootstrap。好吧，我会给您举个例子，伙计。 Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。 Bootstrap 完全免费下载和使用！

轮播插件

Carousel 插件是一个用于在元素之间循环的组件，例如轮播（幻灯片）。

如何创建轮播

以下示例显示了如何创建基本轮播：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

希望对你有所帮助

【讨论】：

问题表明他们不想使用jQuery。

【解决方案3】：

我以一种简单的方式做到了这一点，但是如果横幅很多，它们会变得更大。

let currentBanner;
currentBanner ? currentBanner = currentBanner : currentBanner = 1;

function changeBanner() {
  const banner1 = document.getElementById('banner1');
  const banner2 = document.getElementById('banner2');
  const banner3 = document.getElementById('banner3')
  if (currentBanner == 1) {
    banner1.style.display = 'none'
    banner2.style.display = 'block'
    currentBanner++
  } else if (currentBanner == 2) {
    banner2.style.display = 'none'
    banner3.style.display = 'block'
    currentBanner++
  } else if (currentBanner == 3) {
    banner3.style.display = 'none'
    banner1.style.display = 'block'
    currentBanner = 1;
  }
}

<div class="flex item" style="margin: 4vw 6vw 0vw 6vw; position: relative;"> 
      	<input id="banner2" class="banners" active="true" style="display: none" type="image" src=path></input>
      	<input id="banner3" class="banners" active="true" style="display: none" type="image" src=path></input>
      	<input id="banner1" class="banners" active="false" type="image" src=path></input>
</div>

【讨论】：