-4

这是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>

有人帮我完成这项工作吗？在此先感谢。

4

2 回答 2

3

这是您实现自己的滑动代码的东西。

这是小提琴

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实现功能

于 2013-01-26T15:59:40.437 回答
-1

You can use the jquery cycle plugin to solve the problem.

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

于 2013-01-26T15:28:02.360 回答