jQuery实现首页图片淡入淡出效果的方法_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程序设计有所帮助。