Question

我想知道如何使用淡入淡出动画编写一个小图像旋转器，我有一些div，然后我添加了两个按钮和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

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

我们的想法是将活动元素作为类，并在单击prev或next按钮时将活动元素更改为上一个或下一个元素。在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/

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

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

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

Answer 2

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

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

Answer 3

在编写了许多自定义滑块之后，这是我使用的方法。我这样做是为了最小化创建的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风格，这可以变得更酷，所以你可以在页面上有多个滑块。但这是另一个故事。

用next和prev按钮jquery淡出

3 个答案: