1

我正在关注本教程如何创建自己的 jquery 内容滑块

创建一个图像滑块一切正常，但我必须在一个单独的 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(){ });但没有用，有什么办法解决这个问题吗？

4

2 回答 2

0

我还没有测试过，但是这样的东西应该很普遍。

// 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();
        });
    }
});
于 2013-07-16T07:06:00.040 回答
0

尝试这样的事情：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');
});
于 2013-07-16T07:06:16.923 回答