php - jQuery 图像 slider 问题

Question

我正在学习本教程 how to create your own jquery content slider

要创建图像 slider ，一切正常，但我必须使用 Next和 Previous在一个单独的 div 中，我怎样才能让它工作？

下面是代码

    <div class="nextprev">
       <div class="next">
          <a class="next" href="#">next</a>
       </div>

       <div class="nextborder">
       </div>

       <div class="prev">
          Prev
       </div>
    </div>


    <ul class="im"> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/1/1_large.jpg';?>" /><a class="next1" href="#">next</a></li>
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/2/2_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li>
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/3/3_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/4/4_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li> 
    </ul>

我不想在 <li></li> 中使用下一个和上一个按钮所以我什至试着调用$('.prev').click(function(){ });但没有用，有什么办法解决这个问题吗？

Answer 1

我还没有测试过，但像这样的东西应该非常普遍。

// HANDLE CLICK ON NEXT DIV
$(".next").click(function(){
    //SLIDE ONLY IF MARGIN-LEFT IS BIGGER THAN (ALL SLIDES - ONE SLIDE)*(-1)
    if($(".im").css("margin-left") > ($(".im").width()-$(".im").find("img").width())*(-1)){
        // SET MARGIN-LEFT TO MARGIN-LEFT - ONE SLIDE
        $(".im").animate({
            "margin-left": $(this).css("margin-left")-$(this).find("img").width();
        });
    }
});

// HANDLE CLICK ON PREV DIV
$(".prev").click(function(){
    //SLIDE ONLY IF MARGIN-LEFT SMALLER THAN 0
        if($(".im").css("margin-left") < 0){
        // SET MARGIN-LEFT TO MARGIN-LEFT + ONE SLIDE
        $(".im").animate({
            "margin-left": $(this).css("margin-left")+$(this).find("img").width();
        });
    }
});