javascript - 在一个页面中使用两个轮播

Question

我现在正在设计一个网络使用 html 和 javascript。我想知道如何在一页中使用两个图像滑块（轮播）。

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000);  
}

<table>
  <tr>
    <td>
	<img src="pic1.jpg" class="mySlides" style="width:100%;height:auto;" />
	<img src="pic2.jpg" class="mySlides" style="width:100%;height:auto;" />
	<img src="pic3.jpg" class="mySlides" style="width:100%;height:auto;" />
    </td>
    <td>
      <!--another slider-->
    </td>
  </tr>
</table>

标签： javascripthtml

Answer 1

你可以通过很多方式做到这一点。这样，按照您编写的代码，只需使用可以在循环中生成的类名。例如：

class="slides1"

可以通过以下方式生成：

var i=1
var class_name="slides"
class_name=class_name+i

我希望它有帮助！

var myIndex = 0;
carousel();

function carousel() {
    var caro_sel=1;
  
    for (caro_sel=1;caro_sel<=2;caro_sel++) {
      var i;
      var x = document.getElementsByClassName("mySlides"+caro_sel);
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      myIndex++;
      if (myIndex > x.length) {myIndex = 1}    
      x[myIndex-1].style.display = "block"; 
 
      setTimeout(carousel, 5000); 
    } 
}

<table>
  <tr>
    <td>
	  <img src="pic1.jpg" class="mySlides1" style="width:100%;height:auto;" />
	  <img src="pic2.jpg" class="mySlides1" style="width:100%;height:auto;" />
	  <img src="pic3.jpg" class="mySlides1" style="width:100%;height:auto;" />
    </td>
    <td>  
      <img src="pic1.jpg" class="mySlides2" style="width:100%;height:auto;" />
	  <img src="pic2.jpg" class="mySlides2" style="width:100%;height:auto;" />
	  <img src="pic3.jpg" class="mySlides2" style="width:100%;height:auto;" />
    </td>
  </tr>
</table>