Question

我有这个例子 http://jsbin.com/ipasu3/4/ 单击div代码时，它会隐藏并显示以下结果。如何组合两个简单的控件（next和prev）并产生相同的效果？

谢谢！

Answer 1

这样的东西？

$(function() {
    $('.box:not(:first)').hide();

    $currentBox = $(".box:first");

    $("#next").click(function() {
        $currentBox.fadeOut(function() {
            $currentBox = $currentBox.next();
            $currentBox.fadeIn('300').addClass('active');
        });
    });

    $("#prev").click(function() {
        $currentBox.fadeOut(function() {
            $currentBox = $currentBox.prev();
            $currentBox.fadeIn('300').addClass('active');
        });
    });
});

示例：http://jsfiddle.net/jonathon/jhscX/

这将点击处理程序应用于prev / next div。 $currentBox包含当前正在显示的元素，并且使用此功能完成所有操作（因此您只需使用next()获取prev()和$currentBox元素。

这可以进一步改进 - 例如，您可以检查$currentBox.next()是否为空并隐藏下一个div等。我还在fadeOut调用中添加了一个函数。这导致fadeIn仅在div淡出时执行。

就像关于原始代码的说明一样。你不必这样做：

  $('.box').each(function(){
    $(this).click(function(){
      /* click handler code */
    });
  });

当您为元素设置处理程序时，它将应用于选择器将选择的所有内容。在这种情况下，以下内容是相同的：

  $('.box').click(function(){
      /* click handler code */
      /* 'this' refers to the clicked element */
  });

Answer 2

这应该是有用的：）

HTML：

<div class="gallery">
    <a href="javascript:;" id="prev">Prev</a>
    <a href="javascript:;" id="next">Next</a>
    <div class="gallery-wrapper">
        <img src="image1.jpg" alt="" class="first"/>
        <img src="image2.jpg" alt=""/>
        <img src="image3.jpg" alt=""/>
        <img src="image4.jpg" alt=""/>
        <img src="image5.jpg" alt=""/>
    </div>
</div>

CSS：

a{outline:none;}
.gallery{width:510px;height:320px;position:relative;margin:0 auto;}
.gallery-wrapper{width:460px;height:300px;position:relative;border:10px solid #000;z-index:5;margin:0 auto;}
.gallery-wrapper img{width:460px;height:300px;position:absolute;left:0;top:0;display:none;}
.gallery-wrapper .first{display:block;}
#prev,#next{position:absolute;height:32px;width:32px;background:#ccc;text-indent:-2000px;display:block;z-index:10;top:139px;display:none;}
#prev{left:0;background:url(hp_slide_left_button.gif);}
#next{right:0;background:url(hp_slide_right_button.gif);}

jQuery（坚持脚本中的脚本标签）：

function MyGallery(){
    $(".gallery #prev,.gallery #next").fadeIn();
    function fadeInThis(show){
        $(".gallery-wrapper img:visible").fadeOut();
        $(".gallery-wrapper img:eq("+show+")").fadeIn();
    }

    //start with the img with class .first
    var current=$('.first').index('.gallery-wrapper img');
    var count=$(".gallery-wrapper img").size()-1;
    $(".gallery #prev").click(function(){
        current=(current==0)?count:current-1;
        fadeInThis(current);
        return false;
    });
    $(".gallery #next").click(function(){
        current=(current==count)?0:current+1;
        fadeInThis(current);
        return false;
    });
}

$(function(){
    MyGallery();
});

我希望这会对你有所帮助:)。

干杯

-G。

Answer 3

这是我的尝试：

$(function() {
  var boxCount = $('.box').length;
  $('.box:not(:first)').hide();
  $('.box').each( function(){
    $(this).click( function(){
      $(this).fadeOut();
      $(this).next().fadeIn('300').addClass('active');
    });
  });
  var $nextBtn = $('#next').click(function() {

    var $curr = $('.box.active');
    $curr.fadeOut(function() {
      $(this).removeClass('active');
      var $next = $curr.next();
    if($next.length) {
      $next.fadeIn('300').addClass('active');
      $prevBtn.attr('disabled','');
      if($next.index() == boxCount - 1) $nextBtn.attr('disabled','disabled');
    } else
      $nextBtn.attr('disabled','disabled');
    })
  });
  var $prevBtn = $('#prev').click(function() {
    var $curr = $('.box.active');
    $curr.fadeOut(function() {
      $(this).removeClass('active');
      var $prev = $curr.prev();
    if($prev.length) {
      $prev.fadeIn('300').addClass('active');
      $nextBtn.attr('disabled','');
      if($prev.index() == 0) $prevBtn.attr('disabled','disabled');
    } else
      $prevBtn.attr('disabled','disabled');
    })
  });
  $prevBtn.attr('disabled','disabled');
});

Example link

使用jQuery进行fadeIn / fadeOut控件

3 个答案: