Question

*更新2

我发现图像没有淡入/淡出，因为它们不被视为已加载，为了解决问题，我添加了前3行jQuery代码。我确定这可以重构，所以当我这样做时会更新。

HTML

<div class="gallery">
    <div class='thisImg activeImg'><img src='img/hair/hair-colour-5.jpg' /></div>

      <div class='thisImg'><img src='img/hair/hair-colour-1.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-2.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-3.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-4.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-6.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-7.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-8.jpg' /></div>

      <div class='nextImg'><p><a>&gt;</a></p></div>
      <div class='prevImg'><p><a>&lt;</a></p></div>

</div>

CSS

    .gallery {
    position:absolute;
    top:2px;
    right:0;
    float:right;
    height:400px;
    width:400px;
    border:3px solid #CFC;
}

.thisImg {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    display:hidden;
}

.activeImg {
    display:block;
    z-index:2;
}

.prevImg, .nextImg {
    position:absolute;
    background-color:#CFC;
    box-shadow: inset 0 0 10px #9C0;
    -moz-box-shadow: inset 0 0 10px #9CO;
    -webkit-box-shadow: inset 0 0 10px #9CO;
    text-align:center;
    top:175px;
    height:50px;
    width:50px;
    font-size:42px;
    z-index:2;
    opacity:0.5;
}

.prevImg {
    left:10px;
}

.nextImg {
    right:10px;
}

.nextImg p, .prevImg p {
    position:absolute;
    left:15px;
    top:-5px;
    color:#630;
}

.nextImg:hover, .prevImg:hover {
    opacity:1;
    color:#630;
    display:block;
    cursor:pointer;
}

的jQuery

    $(document).ready(function() {
      $(".thisImg").hide();
      $(".activeImg").show();
      $("#thisImg").bind("load", function () { $(this).fadeIn(); });
    });


    var main = function() {

      $('.nextImg').click(function() {
          var currentImg = $('.activeImg');
          var nextImg = currentImg.next(".thisImg");
          if(nextImg.length == 0) {
              nextImg = $('.thisImg').first();
          }   

          currentImg.fadeOut(3000).removeClass('activeImg');
          nextImg.fadeIn(3000).addClass('activeImg');
      });

      $('.prevImg').click(function() {
          var currentImg = $('.activeImg');
          var prevImg = currentImg.prev(".thisImg");
          if(prevImg.length == 0) {
              prevImg = $('.thisImg').last();
          }   

          currentImg.fadeOut(3000).removeClass('activeImg');
          prevImg.fadeIn(3000).addClass('activeImg');
      });
  }

  $(document).ready(main);

Answer 1

http://jsfiddle.net/73geyvwd/1/ - 工作小提琴

两个主要问题。

1。）您没有设置默认的“activeImg”元素。

<div class="thisImg activeImg">

2。）您的.prev()和.next()方法需要包含.thisImg类选择器，因为您在兄弟级别有其他元素。

var nextImg = currentImg.next(".thisImg");
var prevImg = currentImg.prev(".thisImg");

在浏览完所有图像后，仅通过画廊循环开始淡入/淡出图像

1 个答案: