单击时 JavaScript 淡入新图像

Question

现在，我有一个代码可以在单击文本时在两个图像之间切换，但我想创建一个函数，在其中单击图像本身，它会淡入下一个图像，并且能够使用超过两个图像。另外，我想要使用的图像的宽度和高度各不相同，但所有图像的最大高度和宽度均为 600 像素。这是我当前的代码:

HTML:

<div id="cf2" class="shadow">
<img class="bottom" src="/images/Cirques.jpg" />
<img class="top" src="/images/Clown%20Fish.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>

CSS:

#cf2 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
#cf2 img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf2 img.transparent {
    opacity:0;
}
#cf_onclick {
    cursor:pointer;
}

JavaScript:

$(document).ready(function() {
    $("#cf_onclick").click(function() {
        $("#cf2 img.top").toggleClass("transparent");
    });
});

Answer 1

尝试将#cf2 img添加到选择器启动click事件

$("#cf_onclick, #cf2 img")

$(document).ready(function() {
  
  var n = -1 
  , imgs = $("#cf2 img")
  , fx = function(i, el) {
      return (el || imgs.eq(i)).fadeToggle(1000);
    };
  
  $("#cf_onclick, #cf2 img").click(function() {

    if (n === (-imgs.length)) {
      fx(n);
      n = -1;
      fx(null, imgs);
    } else {
      fx(n);
      --n
    };
    
  });
  
});

#cf2 {
  position: relative;
  height: 281px;
  width: 450px;
  margin: 0 auto;
}
#cf2 img {
  position: absolute;
  left: 0;
}

#cf_onclick {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="cf2" class="shadow">
  <img class="bottom" src="http://lorempixel.com/400/400/cats" />
  <img class="top" src="http://lorempixel.com/400/400/technics" />
  <img class="top" src="http://lorempixel.com/400/400/nature" />
  <img class="top" src="http://lorempixel.com/400/400/animals" />
</div>
<p id="cf_onclick">Click me to toggle</p>