使用 Javascript 单击时滑动轮播答案

【问题标题】：Slide Carousel on Click With Javascript使用 Javascript 单击时滑动轮播
【发布时间】：2018-07-23 14:31:27
【问题描述】：

我在滑动我的轮播 div 时遇到问题，该 div 宽度为 500%，并且有一个“上一个”和“下一个”箭头。我有 5 个内部 div，每个内部 div 包含一个图像和一些文本，占主容器的 20%，当用户单击箭头时，我想来回滑动它们（从左到右）。

我遇到的问题是我只能让 JS 向前和向后滑动一个图像，但是当我再次单击“下一个”箭头时，它不会移动到下一张幻灯片。

*基本上只要看看我的 JS 代码就能解决整个问题！

这是我的代码：

HTML：

 <div id="carouselslider">

   <div id="carouseldiv1">
     <img id="carouselimg1" src="images/offer1.jpg">
     <div 
 id="offertextbox"><h4>Logo Designs</h4><p>We offer a wide range of logo 
 designs to represent your company and online image. Ranging from modern, to 
 conservative logos all the while striving for top notch results for you.</p> 
     </div>
   </div>    
   <div id="carouseldiv2">
     <img id="carouselimg2" src="images/offer2.jpg">
     <div 
 id="offertextbox"><h4>Logo Designs</h4><p>We offer a wide range of logo 
 designs to represent your company and online image. Ranging from modern, to 
 conservative logos all the while striving for top notch results for you.</p> 
     </div>
   </div>
   <div id="carouseldiv3">
     <img id="carouselimg3" src="images/offer3.jpg">
     <div 
 id="offertextbox"><h4>Logo Designs</h4><p>We offer a wide range of logo 
 designs to represent your company and online image. Ranging from modern, to 
 conservative logos all the while striving for top notch results for you.</p>
     </div>
   </div>
   <div id="carouseldiv4">
     <img id="carouselimg4" src="images/offer4.jpg">
     <div 
 id="offertextbox"><h4>Logo Designs</h4><p>We offer a wide range of logo 
 designs to represent your company and online image. Ranging from modern, to 
 conservative logos all the while striving for top notch results for you.</p>
     </div>
   </div>
   <div id="carouseldiv5">
     <img id="carouselimg5" src="images/offer5.jpg">
     <div 
id="offertextbox"><h4>Logo Designs</h4><p>We offer a wide range of logo 
designs to represent your company and online image. Ranging from modern, to 
conservative logos all the while striving for top notch results for you.</p> 
     </div>
  </div>

  <div>      <!--Arrow to slide next and previous (linked to JS below)-->
    <i onclick="slideleft()" class="fa leftarr">&#xf104;</i>
    <i onclick="slideright()" class="fa rightarr">&#xf105;</i>
  </div>

</div>

CSS：

#carouselslider {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 500%;
  height: 100%;
  transition: all 1s;
}

#carouseldiv1 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  transition: all 1s;
}
#carouseldiv2 {
  position: absolute;
  top: 0%;
  left: 20%;
  width: 100%;
  height: 100%;
  transition: all 1s;
}
#carouseldiv3 {
  position: absolute;
  top: 0%;
  left: 40%;
  width: 100%;
  height: 100%;
  transition: all 1s;
} 
#carouseldiv4 {
  position: absolute;
  top: 0%;
  left: 60%;
  width: 100%;
  height: 100%;
  transition: all 1s;
}
#carouseldiv5 {
  position: absolute;
  top: 0%;
  left: 80%;
  width: 100%;
  height: 100%;
  transition: all 1s;
}

JS：

function slideright() {
  if(document.getElementById("carouselslider").style.left = "0%")
  {
    var push = "-100%";
  }
  else if(document.getElementById("carouselslider").style.left = "-100%")
  {
    var push = "-200%";        
  }
  else if(document.getElementById("carouselslider").style.left = "-200%")
  {
    var push = "-300%";        
  }
  else if(document.getElementById("carouselslider").style.left = "-300%")
  {
    var push = "-400%";        
  }
  document.getElementById("carouselslider").style.left = push; 
}

【问题讨论】：

</div><i></i><i></i></div> 末尾附近的第一个 </div> 应该是 <div>。
不，这与此无关，我想我只是在此处粘贴代码时错过了添加 / 。无论如何，谢谢！

标签： javascript html css slider carousel

【解决方案1】：

好的，所以要使用框架，您只需在 html 文件的标题部分链接到它。在这种情况下，我建议使用 bootstrap 4。

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

</head>

将它添加到 head 部分后，您应该可以访问引导类。您将使用的是引导轮播示例以及指向documentation 和进一步examples 的链接：

    <div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

【讨论】：

我认为我可以使用任何东西，但我认为没有限制。虽然以前从未使用过。你能告诉我怎么做吗？
谢谢你，但我已经在 w3schools 网站上看到了这个。我特别没有使用它的原因是因为它弄乱了我的整个 html 布局，而且修复一个完整的布局页面需要做太多的工作。您是否知道足够的 JS 来修复脚本以使其正常工作？谢谢
我修复了向前点击的问题，但没有针对之前的点击...
您打算使用引导程序吗？介意展示一下你的索引文件是什么样子的吗？
没关系，我找到了！请问你能接受我的回答吗？感谢您的帮助！

【解决方案2】：

大家好，经过数小时的代码工作后，我终于找到了解决方案！这是JS供其他需要此解决方案的人参考。

//Carousel Sliders JS
var x = 0;

function slideright() {

    if(x != -400)
    {
        x = x -100;
        document.getElementById("carouselslider").style.left = x+"%";
    }
}


function slideleft() {

    if(x != 0)
    {    
        x = x + 100;
        document.getElementById("carouselslider").style.left = x+"%";
    }
}

【讨论】：