使用我当前使用的当前基本JQuery Image Gallery淡入图像

Question

 $(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> 

上面是我用来制作非常基本的缩略图库的代码，您能否快速浏览一下并向我展示如何淡入图像。

Answer 1

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

但是看起来您想从一个图像淡入淡出，这是另一种称为“淡入淡出”的淡入淡出。 在交叉淡入淡出的情况下，一张图像逐渐淡出，另一幅图像逐渐淡入。

请查看此链接以获取jQuery crossfade实现： http : //www.simonbattersby.com/blog/simple-jquery-image-crossfade/