使用我使用的当前基本JQuery图像库中的渐变图像

Fading images in, with the current basic JQuery Image gallery i have used

本文关键字：图像 渐变 JQuery      更新时间：2023-09-26

$(document).ready(function() {
    // swaps the images on hover
    $("#imgGallery li img").hover(function(){
        $('#main').attr('src',$(this).attr('src').replace('thumbnail/', ''));
    });
    // Image pre-load
    var imgSwap = [];
     $("#imgGallery li img").each(function(){
        imgUrl = this.src.replace('thumbnail/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgGallery">
  <img src="gallery/img1.jpg" alt="" id="main" />
  <ul>
	  <li><img src="gallery/thumbnail/img1.jpg" alt="" /></li>
      <li><img src="gallery/thumbnail/img2.jpg" alt="" /></li>
	  <li><img src="gallery/thumbnail/img3.jpg" alt="" /></li>
	  <li><img src="gallery/thumbnail/img4.jpg" alt="" /></li>
	  <li><img src="gallery/thumbnail/img5.jpg" alt="" /></li>
	  <li><img src="gallery/thumbnail/img6.jpg" alt="" /></li>
	  <li><img src="gallery/thumbnail/img7.jpg" alt="" /></li>
  </ul>
</div>

上面是我用来制作一个非常基本的缩略图库的代码，你能快速看一下并向我展示如何将图像淡入吗？

好吧，jQuery有.fadeIn（）和.fadeOut（）.

但看起来你想从一张图像渐变到另一张图像，这是一种不同类型的渐变，称为"交叉渐变"。在交叉渐变场景中，一个图像淡出，另一个图像淡入。

签出此链接以获得jQuery交叉渐变实现：http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

相关文章：