Question

我在滑动轮播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; 
}

Answer 1

好的，要使用一个框架，您要做的就是在html文件的标题部分中链接到该框架。在这种情况下，我建议使用引导程序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>

将其添加到头部后，您应该可以访问引导程序类。您将使用的是一个自举轮播示例，以及指向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>

Answer 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+"%";
    }
}

使用Java单击时滑动轮播

2 个答案: