jquery - ボタンクリック時に画像の対応するテキストを表示するには、jqueryを使用してスライダーを作成する必要があります

Question

これがhtmlコードです

<div id="slider" class="images">
    <img src="img/image1.png" height=200 width=200>
        <p>Image1 corresponding text here</p>    
    <img src="img/image2.png" height=200 width=200>
        <p>Image2 corresponding text here</p>    
    <img src="img/image3.png" height=200 width=200>
        <p>Image3 corresponding text here</p>    
</div>
<div class="switch_image">
    <a href="#" id="prev">Prev</a>
    <a href="#" id="next">Next</a>
</div>     

誰かが私がこの仕事をするのを手伝ってくれますか？

Answer 1

これは、スライド用の独自のコードを実装するためのものです。

これがフィドルです

html

<div id="slider" class="images">
<img src="img/image1.png" class="active item" height=200 width=200>
    <p>Image1 corresponding text here</p>    
<img src="img/image2.png" class="item" height=200 width=200>
    <p>Image2 corresponding text here</p>    
<img src="img/image3.png" class="item" height=200 width=200>
    <p>Image3 corresponding text here</p>    
</div>
<div class="switch_image">
    <a href="#" id="prev">Prev</a>
    <a href="#" id="next">Next</a>
</div>     

css

#slider img { display: none; }

#slider img + p { display: none; }

#slider img:first-child { display: block; }

#slider img:first-child + p { display: block; }

jquery

$("#next").click(function(){
slideImage(); 
 });

 function slideImage(dir){
   if($("img.active").next().next().hasClass("item"))
       {
         $("img.active").hide().next().hide();
         $("img.active").removeClass("active").next().next().addClass("active");
       }
       else
       {
         $("img.active").removeClass("active").hide().next().hide();
         $("#slider img:first-child").addClass("active");
       }

      $("img.active").show();
     $("img.active").next().show();
 }

注：機能のみnextが実装されています

Answer 2

jqueryサイクルプラグインを使用して問題を解決できます。

http://jquery.malsup.com/cycle/int2.html。