jqueryを使用して複数の画像をブラウズするには

-1

次の画像と以前の画像ボタン用にjQuery関数を記述する必要があります。私の問題は、すべての画像が1ページに読み込まれ、1つずつプレビューできないことです。jqueryを使用して複数の画像をブラウズするには

<body> 
    <div class="main"> 
     <h1>IMAGE SLIDESHOW</h1> 
    </div> 
    <div class="dynamic"> 
     <div id="Div0"><img src="image1.jpg" alt="image1"/></div> 
     <div id="Div1"><img src="image2.jpg" alt="image2"/></div> 
     <div id="Div2"><img src="image3.jpg" alt="image3"/></div> 
     <div id="Div3"><img src="image4.jpg" alt="image4"/></div> 
    </div> 
    <div style="text-align:center"> 
     <label>Previous Image</label> 
     <button id="btnpre"><<</button> 
     <button id="btnfor">>></button> 
     <label>Next Image</label></div> 
     <script type="text/javascript" src="Scripts/jquery-3.1.0.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() {}); 
     </script> 
    </body> 
</html>

出典

2016-09-09 Keshav_Nandhan

$(document).ready(function() { 
     var i = parseInt($(".show").attr('id')); 
     $("#btnpre").click(function() { 
      if (i == 0) { 
       i = 3; 
       $(".show").addClass("hide"); 
       $(".show").removeClass("show"); 
       $("#" + i).addClass('show'); 
       $("#" + i).removeClass('hide'); 
      } else { 
       i = i - 1; 
       $(".show").addClass("hide"); 
       $(".show").removeClass("show"); 
       $("#" + i).addClass('show'); 
       $("#" + i).removeClass('hide'); 
      } 
     }); 

     $("#btnfor").click(function() { 

      if (i == 3) { 
       i = 0; 
       $(".show").addClass("hide"); 
       $(".show").removeClass("show"); 
       $("#" + i).addClass('show'); 
       $("#" + i).removeClass('hide'); 
      } else { 
       i = i + 1; 
       $(".show").addClass("hide"); 
       $(".show").removeClass("show"); 
       $("#" + i).addClass('show'); 
       $("#" + i).removeClass('hide'); 

      } 
     }); 

    });

出典

2016-09-12 12:15:55

jqueryを使用して複数の画像をブラウズするには

答えて

関連する問題