Question

我正在关注本教程how to create your own jquery content slider

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

这是下面的代码

    <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();
        });
    }
});

Answer 2

尝试这样的事情：http://jsfiddle.net/38pzs/

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


<ul class="im"> 
   <li class="active"><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>

的CSS：

.im li {
    display: none;
}
.im li.active {
    display: inherit;
}

HTML：

$(".prev").on('click', function() {
    $('li.active:not(:first-child)').removeClass('active').prev().addClass('active');
});

$(".next").on('click', function() {
    $('li.active:not(:last-child)').removeClass('active').next().addClass('active');
});

jQuery Image Slider问题

2 个答案: