jQuery實現首頁圖片淡入淡出效果的方法

 這裡演示當當網的品牌店鋪首頁效果，演示地址為：http://static.dangdang.com/gm/topic/2270_181320.shtml

效果圖如下所示：

需求：

1. 綠色區域要求在圖片上方，半透明顯示

2. 當鼠標移動到紅色區域，切換相應的圖片

3. 首頁的三張大圖輪轉

HTML：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div id="carousel"> <div id="carouselimg" class="content_top"> <div id="imgcontainer" class="slide_panel"> <a target="_blank" href="http://www.baidu.com" mce_href="http://www.baidu.com"><img src="images/brandshop/band_lx_717x280.gif" mce_src="images/brandshop/band_lx_717x280.gif"/></a> <a target="_blank" href="http://www.google.com" mce_href="http://www.google.com"><img src="images/brandshop/band_agz_717x280.gif" mce_src="images/brandshop/band_agz_717x280.gif"/></a> <a target="_blank" href="http://www.dangdang.com" mce_href="http://www.dangdang.com"><img src="images/brandshop/band_qb_717x280.gif" mce_src="images/brandshop/band_qb_717x280.gif"/></a> </div> </div> <div id="carouseltitle"> <ul> <li> <a href="#" mce_href="#">聯想 <span>lenovo</span></a> </li> <li> <a href="#" mce_href="#">愛國者 <span>aigo</span></a> </li> <li> <a href="#" mce_href="#">倩碧 <span>CLINIQUE</span></a> </li> </ul> </div>

CSS：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 <mce:style type="text/css"><!-- *{ padding:0; margin:0; } #carousel{ border-color:#DFDFDF;border-style:solid;border-width:0 1px 1px; position:relative;/*DO NOT delete this line*/ } #carousel ul{ list-style:none; } #carousel #carouselimg{ position:relative;/*fix ie7 overflow bug*/ overflow:hidden; } #carousel #carouselimg #imgcontainer{ position:absolute; left:0px; top:0px; } #carousel #carouselimg img{ float:left;/*fix ie6 auto-margin bug*/ border:0; /*display:none;*/ } #carousel #carouseltitle{ position:absolute; bottom:0px; } #carousel #carouseltitle ul{ } #carousel #carouseltitle li{ width:239px; height:30px; line-height:30px; font-size:14px; text-align:center; background:#000; color:#FFF; float:left; cursor:pointer; opacity:.6; filter:alpha(opacity=60); } #carousel #carouseltitle .active{ background:#cfaf73; color:#FFF; opacity:.9; filter:alpha(opacity=90); } #carousel #carouseltitle .active a{ color:#000; } #carousel #carouseltitle li a{ text-decoration:none; color:#fff; } #carousel #carouseltitle li a span{ font-family:Arial; } --></mce:style><style type="text/css" mce_bogus="1"> *{ padding:0; margin:0; } #carousel{ border-color:#DFDFDF;border-style:solid;border-width:0 1px 1px; position:relative;/*DO NOT delete this line*/ } #carousel ul{ list-style:none; } #carousel #carouselimg{ position:relative;/*fix ie7 overflow bug*/ overflow:hidden; } #carousel #carouselimg #imgcontainer{ position:absolute; left:0px; top:0px; } #carousel #carouselimg img{ float:left;/*fix ie6 auto-margin bug*/ border:0; /*display:none;*/ } #carousel #carouseltitle{ position:absolute; bottom:0px; } #carousel #carouseltitle ul{ } #carousel #carouseltitle li{ width:239px; height:30px; line-height:30px; font-size:14px; text-align:center; background:#000; color:#FFF; float:left; cursor:pointer; opacity:.6; filter:alpha(opacity=60); } #carousel #carouseltitle .active{