Image Slider JS 的一些问题

【问题标题】：Image Slider JS some problemsImage Slider JS 的一些问题
【发布时间】：2020-03-22 16:24:36
【问题描述】：

选项卡式滑块的一些问题。 大家好，我有一些问题。我的标签式画廊不工作或工作但不匹配工作。 button2 和 button3 单击但显示面板每次都无法正常工作。我需要一些帮助，你可以看到每一个问题。 我想添加自动滑块，但它有很多问题。我能做些什么 ？我需要帮助。谢谢。

function openTab(evt, tabName) {
  var i, showpanel, smtbutton;
  showpanel = document.getElementsByClassName("showpanel");
  for (i = 0; i < showpanel.length; i++) {
    showpanel[i].style.display = "none";
    
  }
  smtbutton = document.getElementsByClassName("smtbutton");
  for (i = 0; i < smtbutton.length; i++) {
    smtbutton[i].className = smtbutton[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
  
  
  
}//ikinci benim yer

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
   if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
document.getElementById("defaultOpen").click();
* {
  box-sizing: border-box;
}

img {
   border: 1px solid #ddd;
   border-radius: 15px ;
  vertical-align: middle;
}


.showpanel {
  position: relative;  
  width:900px;
  height:337px;
 display: none;
}


.mySlides {
  display: none;
  width:900px;
  height:337px;
   
}
.cursor {
  cursor: pointer;
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  
}
.next {
  right: 0;
  border-radius: 3px;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 10%;
  height:10%;
  
}
.demo {
  opacity: 1;
}
.active,
.demo:hover {
  opacity: 0.6;
}
.smtbutton {
  display: inline-block;
  border-radius: 16px ;
  background-color: #a1cf49 ;
  border: 0px;
  color: #314d47;
  text-align: center;
  position:relative;
  left:21%;
  font-size: 13px;
  padding: 10px;
  width: 160px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 13px;
  
}
.smtbutton #smtspan {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.smtbutton #smtspan:after {
  content: '\00bb';
  position: absolute;
  opacity: 0; 
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.smtbutton:hover #smtspan {
  padding-right: 25px;
}
.smtbutton:hover #smtspan:after {
  opacity: 1;
  right: 0;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


@media only screen and (max-width: 300px) {
  .prev, .next {font-size: 11px}
}
<div class="smtop">
<button class="smtbutton" onclick="openTab(event, 'smta')" id="defaultOpen"><span id="smtspan">Button1 </span></button>
<button class="smtbutton" onclick="openTab(event, 'smtb')" > <span id="smtspan">button2</span></button>
<button class="smtbutton" onclick="openTab(event, 'smtc')"> <span id="smtspan">button3</span></button>
</div>
<div id="smta" class="showpanel">
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%">
  </div>

  <div  class="mySlides fade ">
    
    <img src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
  
    <img src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%">
  </div> <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%">
  </div>
     <div class="mySlides fade ">
   
    <img src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%" onclick="currentSlide(1)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%" onclick="currentSlide(2)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%" onclick="currentSlide(3)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%" onclick="currentSlide(4)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%" onclick="currentSlide(5)" >
    </div>    
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%" onclick="currentSlide(6)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%" onclick="currentSlide(7)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%" onclick="currentSlide(8)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%" onclick="currentSlide(9)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%" onclick="currentSlide(10)">
    </div>
  </div>
</div>

<div id="smtb" class="showpanel">
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
    
    <img src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
  
    <img src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%">
  </div> <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%">
  </div>
     <div class="mySlides fade ">
   
    <img src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%" onclick="currentSlide(11)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%" onclick="currentSlide(12)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%" onclick="currentSlide(13)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%" onclick="currentSlide(14)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%" onclick="currentSlide(15)" >
    </div>    
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%" onclick="currentSlide(16)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%" onclick="currentSlide(17)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%" onclick="currentSlide(18)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%" onclick="currentSlide(19)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%" onclick="currentSlide(20)">
    </div>
  </div>
</div>
<div id="smtc" class="showpanel" >
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
    
    <img src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
  
    <img src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%">
  </div> <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%">
  </div>
     <div class="mySlides fade ">
   
    <img src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%" onclick="currentSlide(21)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%" onclick="currentSlide(22)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%" onclick="currentSlide(23)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%" onclick="currentSlide(24)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%" onclick="currentSlide(25)" >
    </div>    
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%" onclick="currentSlide(26)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%" onclick="currentSlide(27)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%" onclick="currentSlide(28)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%" onclick="currentSlide(29)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%" onclick="currentSlide(30)">
    </div>
  </div>
</div>

【问题讨论】：

    标签： javascript jquery html css slider


    【解决方案1】：

    通过添加document.getElementById(tabName).firstElementChild.style.display ="block";，请检查这可能对我是每个标签的第一个元素显示块有帮助。

    逻辑只有当标签主动内部第一个元素也将不可否告生和同一ID不再使用。

    function openTab(evt, tabName) {
  var i, showpanel, smtbutton;
  showpanel = document.getElementsByClassName("showpanel");
  for (i = 0; i < showpanel.length; i++) {
    showpanel[i].style.display = "none";
    
  }
  smtbutton = document.getElementsByClassName("smtbutton");
  for (i = 0; i < smtbutton.length; i++) {
    smtbutton[i].className = smtbutton[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
document.getElementById(tabName).firstElementChild.style.display ="block";
  evt.currentTarget.className += " active";
  
  
  
}//ikinci benim yer

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
   if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
document.getElementById("defaultOpen").click();
    * {
  box-sizing: border-box;
}

img {
   border: 1px solid #ddd;
   border-radius: 15px ;
  vertical-align: middle;
}


.showpanel {
  position: relative;  
  width:900px;
  height:337px;
 display: none;
}


.mySlides {
  display: none;
  width:900px;
  height:337px;
   
}
.cursor {
  cursor: pointer;
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  
}
.next {
  right: 0;
  border-radius: 3px;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 10%;
  height:10%;
  
}
.demo {
  opacity: 1;
}
.active,
.demo:hover {
  opacity: 0.6;
}
.smtbutton {
  display: inline-block;
  border-radius: 16px ;
  background-color: #a1cf49 ;
  border: 0px;
  color: #314d47;
  text-align: center;
  position:relative;
  left:21%;
  font-size: 13px;
  padding: 10px;
  width: 160px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 13px;
  
}
.smtbutton #smtspan {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.smtbutton #smtspan:after {
  content: '\00bb';
  position: absolute;
  opacity: 0; 
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.smtbutton:hover #smtspan {
  padding-right: 25px;
}
.smtbutton:hover #smtspan:after {
  opacity: 1;
  right: 0;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


@media only screen and (max-width: 300px) {
  .prev, .next {font-size: 11px}
}
    <div class="smtop">
<button class="smtbutton" onclick="openTab(event, 'smta')" id="defaultOpen"><span id="smtspan">Button1 </span></button>
<button class="smtbutton" onclick="openTab(event, 'smtb')" > <span id="smtspan">button2</span></button>
<button class="smtbutton" onclick="openTab(event, 'smtc')"> <span id="smtspan">button3</span></button>
</div>
<div id="smta" class="showpanel">
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%">
  </div>

  <div  class="mySlides fade ">
    
    <img src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
  
    <img src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%">
  </div> <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%">
  </div>
     <div class="mySlides fade ">
   
    <img src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%" onclick="currentSlide(1)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%" onclick="currentSlide(2)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%" onclick="currentSlide(3)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%" onclick="currentSlide(4)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%" onclick="currentSlide(5)" >
    </div>    
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%" onclick="currentSlide(6)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%" onclick="currentSlide(7)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%" onclick="currentSlide(8)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%" onclick="currentSlide(9)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%" onclick="currentSlide(10)">
    </div>
  </div>
</div>

<div id="smtb" class="showpanel">
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
    
    <img src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
  
    <img src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%">
  </div> <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%">
  </div>
     <div class="mySlides fade ">
   
    <img src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%" onclick="currentSlide(11)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%" onclick="currentSlide(12)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%" onclick="currentSlide(13)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%" onclick="currentSlide(14)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%" onclick="currentSlide(15)" >
    </div>    
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%" onclick="currentSlide(16)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%" onclick="currentSlide(17)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%" onclick="currentSlide(18)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%" onclick="currentSlide(19)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%" onclick="currentSlide(20)">
    </div>
  </div>
</div>
<div id="smtc" class="showpanel" >
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
    
    <img src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%">
  </div>

  <div class="mySlides fade ">
  
    <img src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%">
  </div> <div class="mySlides fade">
    
    <img src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%">
  </div>
    
  <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%">
  </div>
     <div class="mySlides fade ">
   
    <img src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%">
  </div> <div class="mySlides fade">
   
    <img src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n17.jpg" style="width:100%" onclick="currentSlide(21)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n11.jpg" style="width:100%" onclick="currentSlide(22)" >
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r15.jpg" style="width:100%" onclick="currentSlide(23)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n5.jpg" style="width:100%" onclick="currentSlide(24)">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n2.jpg" style="width:100%" onclick="currentSlide(25)" >
    </div>    
    <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n20.jpg" style="width:100%" onclick="currentSlide(26)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r18.jpg" style="width:100%" onclick="currentSlide(27)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/r14.jpg" style="width:100%" onclick="currentSlide(28)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n3.jpg" style="width:100%" onclick="currentSlide(29)">
    </div> <div class="column">
      <img class="demo cursor" src="https://www.banco.com.tr/uploads/n10.jpg" style="width:100%" onclick="currentSlide(30)">
    </div>
  </div>
</div>

    【讨论】：

    • 它的工作！谢谢！
    • 但是如果我选择 button1 某人 currentslide 并选择 button2 它显示两个显示面板会有一些问题。怎么解决呢？我的大脑不工作这个横幅我尝试了太多，我的大脑完成了：/
    • 如果你使用 bootstrap 然后使用 bootstrap tab 并在 tab 内容中使用 bootstrap carousel 或使用 jquery 插件。
    猜你喜欢
    • 1970-01-01
    • 2016-08-12
    • 2021-08-11
    • 2021-08-23
    • 1970-01-01
    • 1970-01-01
    • 2019-09-12
    • 2016-06-29
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode