使用下一个和上一个按钮 jquery 淡入淡出

Question

我想知道如何编写带有淡入淡出动画的小图像旋转器， 我有一些 div，我在 next 和 prev 添加了两个按钮：

<div id="target" class="cible" style="height: 240px;">   
     <div id="211" class="block" style="display: block;"> </div>
     <div id="491" class="block" style="display: none;"> </div>
     <div id="496" class="block" style="display: none;"> </div>

和带有按钮的 div

   <div id="next" class="next"></div>
   <div id="prev" class="prev"></div>

我尝试使用 .next() 和 .prev() 和 addClass() 函数，但我并没有真正了解当前 div 的机制。如果有人可以解释一下

谢谢

我试试这个，它有效但不是真的。

 $(".next, .prev").click(function() {
var next_visible = $(this).hasClass(".prev") ? 
        $(".block:visible").prev(".block") : 
        $(".block:visible").next(".block");
$(".block").hide();
next_visible.show();
   });

Answer 1

鉴于您的新要求，我会这样做：

这个想法是将活动元素作为一个类，当您单击上一个或下一个按钮时，您将活动元素更改为上一个或下一个元素。而在 CSS 中，您说除了显示的活动幻灯片之外，所有幻灯片都是隐藏的。

HTML：

<div id="target" class="cible" style="height: 240px;">   
     <div id="211" class="slide">211</div>
     <div id="491" class="slide active">491</div>
    <div id="496" class="slide">496</div>
</div>
<!-- same next and prev buttons as yours -->

CSS：

.slide {
  display:none;   
}
.active {
 display:block;   
}

jQuery：

$("#next").click(function() {
    activeElem = $("#target .active");
    if (!activeElem .is(':last-child')) {
     activeElem .removeClass('active').next().addClass('active');
    }
});
// similar click event for the $("#prev") button

jsFiddle 在这里：http://jsfiddle.net/guz7D/

---

基于同样的想法，我修改了代码以包含新元素的fadeIn：

activeElem .removeClass('active').fadeOut(0).next().addClass('active').fadeIn(400);

jsFiddle 在这里：http://jsfiddle.net/guz7D/1/

Answer 2

在编写了很多自定义滑块之后，这是我使用的方法。我这样做是为了尽量减少创建的 jQuery 对象的数量。这是因为您从不测试以查找活动元素，它由变量管理。执行 $(elem:visable) 或 $(elem).hasClass 之类的操作是对 jQuery 对象的浪费，除非您真的必须这样做，否则您不应该使用 jQuery 来检测应用程序的状态。

//create a universal block jQuery object, and give it an index property (current)
var blocks = $('div.blocks');
    blocks.current = 0;

var next   = $('.next'),
    prev   = $('.prev');

//make a universal slide handler
function blockControl(index){
    //using hide and show here to fit your example, 
    //but this is where you would do slide or fades or whatever animation
    //the important part is it is 'showing' based on .eq()
    blocks.hide().eq(index).show();
}

//setup the initial state
blockControl(blocks.current);

next.on('click', function(){
    //move current up one        
    blocks.current ++;
    //test if its the last block
    if( blocks.current >= blocks.length ){
        //prevent over reach
        blocks.current = blocks.length;
        //handle how the last slide will work, you could loop back the beginning or 
        //whatever. Here we are just going to hide the next button.
        next.fadeOut();
        prev.fadeIn();
    }else{                        
        //insure prev button is visalbe
        prev.fadeIn();            
        //do slider
        blockControl(blocks.current);
    }           
});

prev.on('click', function(){
    //move current down one        
    blocks.current --;
    //test if its the first block
    if( blocks.current <= 0 ){
        //prevent negative numbers
        blocks.current = 0;
        //Here we are just going to hide the prev button. But we also could put in control 
        //to loop the last or whatever
        prev.fadeOut();
        next.fadeIn();
    }else{                        
        //insure next button is visalbe
        next.fadeIn();            
        //do slider
        blockControl(blocks.current);
    }           
});

这里的逻辑分离很重要。拥有一个用于控制块可视性的处理程序意味着它可以由箭头以外的东西触发。箭头逻辑和控制器逻辑也可以相互独立地改变。此外，您始终可以从应用程序的任何部分访问当前显示的元素，而无需测试或查询。

我希望您真正理解这里的概念以及为什么它会以这种方式分离出来。此模式可用于几乎任何类型的滑块或内容旋转器。例如，如果你想要小的可点击项目符号指示器，它很容易挂钩：

var bullets = $('a.bullet');
bullets.on('click',function(){
     var index = $(this).index();
     bullets.removeClass('active').eq(index).addClass('active');
     blockControl(index);
});

等等。

如果您将其设为 OO 样式，这会变得更酷，因此您可以在一个页面上拥有多个滑块。但那是另一回事了。

Answer 3

您真的应该为此使用 jQuery 插件。例如，the nivo slider 是一个很好的多价滑块插件。

如果你想要一些非常简单的东西，你有 jQuery 插件tiny casousel。