本文实例讲述了jQuery实现首页图片淡入淡出效果的方法。分享给大家供大家参考。具体分析如下：
这里演示当当网的品牌店铺首页效果，演示地址为：http://static.dangdang.com/gm/topic/2270_181320.shtml
效果图如下所示：
需求：
1. 绿色区域要求在图片上方，半透明显示
2. 当鼠标移动到红色区域，切换相应的图片
3. 首页的三张大图轮转
HTML：
联想 lenovo
爱国者 aigo
倩碧 CLINIQUE
CSS：
引入River Zhang 的fr.carousel.js
可以实现图片的轮转效果，但是点击图片后，每次链接跳转都是最后一张图的a href
查看fr.carousel.js ，原来，它实现的思路是将三张图一张叠在一张上边，使用setInterval() ,将一张图的opacity 值置为1，其余两张为0。但是，这将导致你点击图片后，每次的链接都是最上边的那张图(即最后倩碧那一张)。
解决方法：
设置轮转图的 z-index，当图片显示的时候，其父节点 的z-index 比其它元素高。
jQuery实现：
希望本文所述对大家的jQuery程序设计有所帮助。
