如何使用下一个和上一个按钮在每个<ul>中显示一些图像

Question

如何使用下一个和上一个按钮在每个<ul>元素中显示一些图像？

Answer 1

你必须制作图片标签然后写下这些：

 <ul>
          <li id="image1" style="display:block"><img src="resources/images/larges/01.jpg"></li>
    <li id="image2" style="display:none"> 
<img src="resources/images/larges/02.jpg"></li>
</ul>

        <img style='cursor:pointer;' onclick="showDiv(1)" src="">
        <img style='cursor:pointer;' onclick="showDiv(2)" src="">
        <button type="button" onclick="showDiv(currentImage - 1)">Pre</button>
        <button type="button" onclick="showDiv(currentImage + 1)">Next</button>
        <script>
        var currentImage = 1;
        function showDiv(which) {
    //set display none for all image element
           for(i = 0; i < 13; i++) {
              document.getElementById("image"+i).style.display="none";
           }
           //in the next 2 lines, you make sure which isn't lower than 1, and isn't greater than the number of images
           if(which < 1) which = 1;
           if(which > 13) which = 13;
    //set display block for current Image by element id
           document.getElementById("image" + which).style.display = "block";
           currentImage = which;
        } </script>

对于下一个ul你只需要改变li标签的id。

Answer 2

您可以使用jQuery的.prev()和.next()函数来实现这一目标。代码段如下所示 -

＆＃13;

＆＃13;

$(document).ready(function(){
    
      var selected = $(".selected");
      selected.css( "background-color", "red" );
      
    $("#prev").on("click", function(){
    var selected = $(".selected");
      if(selected.prev().length){
      selected.prev().css( "background-color", "red" );
      selected.prev().addClass("selected");
      selected.removeClass("selected");
      selected.css("background-color", "");
      }
      else{
       $(".item:last").addClass('selected');
       $(".item:last").css( "background-color", "red" );
       selected.removeClass("selected");
       selected.css("background-color", "");
      }
    });
    
     $("#next").on("click", function(){
    var selected = $(".selected");
    if(selected.next().length){
      selected.next().css( "background-color", "red" );
      selected.next().addClass("selected");
      selected.removeClass("selected");
      selected.css("background-color", "");
      }
      else{
       $(".item:first").addClass('selected');
       $(".item:first").css( "background-color", "red" );
       selected.removeClass("selected");
       selected.css("background-color", "");
      }
    });
    
  
    
});

＆＃13;

body { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item">list item 1</li>
  <li class="item">list item 2</li>
  <li class="item selected">list item 3</li>
  <li class="item">list item 4</li>
  <li class="item">list item 5</li>
</ul>
<button id="prev" class="button">Previous</button>
<button id="next" class="button">Next</button>

＆＃13;

＆＃13;

＆＃13;