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>

Answer 2

这适用于多张图片：

$(document).ready(function() {
    $.fn.nextOrFirst = function (selector) {
        var next = this.next(selector);
        return (next.length) ? next : this.prevAll(selector).last();
    };
    $("#cf2 img").click(function() {
        $(this)
        .removeClass('visible')
        .nextOrFirst()
        .addClass('visible');
    });
});

#cf2 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
#cf2 img {
    position:absolute;
    left:0;
    max-height: 600px;
    max-width: 600px;
    opacity: 0;
    z-index: 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.visible {
    opacity: 1;
    z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
    <img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
    <img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
    <img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
    <img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>

我没有使用 .invisible class，而是使用 .visible class，它也有 z-index 1，大于默认图像。因此，具有 class 的图像将可见，而其他图像默认具有 opacity: 0。

我还扩展了 jQuery 对象，使其具有一个 nextOrFirst 方法（我从 here 偷来的），这样当可见图像是堆栈，下一个将是第一个。所以现在，图像的显示顺序是从上到下。

我决定这样做是为了保持您的 CSS 转换，但您也可以使用 jQuery 的 fadeIn 和 fadeOut 方法。

Answer 3

应该这样做：

$(document).ready(function() {
  $("#cf_onclick").click(function() {
    var current = $("#cf2 img.top").removeClass('top');

    var next = current.next();
    next = next.length ? next : current.siblings().first();
    next.addClass('top');
  });
});

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

#cf2 img {
  position:absolute;
  left:0;
  opacity: 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.top {
  opacity: 1;
}

#cf_onclick {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="cf_onclick">Click me to toggle</p>
<div id="cf2" class="shadow">
    <img src="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" />
    <img class="top" src="http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Apps-Safari-icon.png" />
</div>

Javascript 单击时淡入新图像

Javascript Fade Into New Image When Clicked

javascript

image

fade

slideshow