求助：将按钮切换轮播图改为点击图片切换的无按钮实现方案

Hey there! Let's adjust your current code so clicking directly on the image switches to the next slide. Your existing logic for cycling slides is already solid—we just need to hook up the click event to the images themselves instead of relying solely on buttons. Here's the modified code and breakdown:

Modified Full Code #

<script>
var slideIndex = [1,1,1]; 
var slideId = ["mySlides1", "mySlides2", "mySlides3"] 
showDivs(1, 0); 
showDivs(1, 1); 
showDivs(1, 2); 

function plusDivs(n, no) { 
  showDivs(slideIndex[no] += n, no); 
} 

function showDivs(n, no) { 
  var i; 
  var x = document.getElementsByClassName(slideId[no]); 
  if (n > x.length) {slideIndex[no] = 1} 
  if (n < 1) {slideIndex[no] = x.length} 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
  x[slideIndex[no]-1].style.display = "block"; 
} 
</script>

<div class="w3-content w3-display-container"> 
  <img class="mySlides1" src="images01/designed1.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed2.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed3.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed4.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed5.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed6.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed7.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed8.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed9.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <img class="mySlides1" src="images01/designed10.jpg" style="width:50%" onclick="plusDivs(1, 0)"> 
  <!-- Optional: Remove these buttons if you don't want them anymore -->
  <!-- <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">&#10094;</button> 
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">&#10095;</button> -->
</div>

Key Changes Explained #

• Added click handlers to images: Each <img> tag now includes onclick="plusDivs(1, 0)". This triggers the exact same function that the right button used to call, advancing to the next slide. The 1 tells the function to move forward one slide, and 0 targets your first slideshow group (mySlides1).
• Optional button cleanup: If you don't want the left/right navigation buttons anymore, just comment out or delete those <button> elements (they're marked in the code for easy removal).

Your existing showDivs and plusDivs functions already handle looping back to the first slide when you reach the end, so no tweaks are needed there—this setup will cycle through all your images seamlessly with every click.

内容的提问来源于stack exchange，提问作者Mzmni