jquery를 사용하여 여러 이미지를 탐색하려면

-1

다음 이미지 및 이전 이미지 버튼에 대해 jQuery 함수를 작성해야합니다. 내 문제는 모든 이미지가 단일 페이지에로드되고 하나씩 미리 볼 수 없다는 것입니다.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를 사용하여 여러 이미지를 탐색하려면

답변

관련 문제