Jquery 實現圖片輪換_jquery

網站首頁沒有一點動畫怎麼可以，我以前用過Flash As3做過圖片切換，效果非常不錯，可是麻煩，改變起來麻煩。一直想自己做個圖片切換效果，總認為比較​​麻煩，今天自己實踐了一下，其實還比較簡單。不過有個小問題，IE8不相容模式下 設定有透明效果的div 樣式添加失效了，但是我用谷歌，IE8兼容測試都ok。

反正是給自己記錄的，也不多話了，js沒有跟頁面分離，也沒有做出插件。一個網站要不了幾個這種效果，先實現了再說吧。最後的效果還是很高大上的。

頁 JS代碼

複製程式碼 程式碼如下:

 

複製程式碼以下程式碼：

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

   
   
   
    頭>

   

       

           
           
           
           
           
           
           
           
       

       

8 7                                                                   地             3                 title="2" onclick="返回 picChange(2)">2                     onclick=" return picChange(1)" class="">1
       

       

            測試介紹文件了啊

   

身體>

 css 的實作

複製程式碼程式碼如下：

.picMain
{
    邊距：自動；
    溢位：隱藏；
    寬度：1000px；
    高度：400px；
    位置：相對；
}
.picimg
{
    寬度：10000px；
    高度：400px；
    背景顏色：#000000;
    位置：絕對；
    上方：0px;
}
.pic備註
{
    位置：絕對；
    寬度：500px；
    高度：50px；
    底部：0px;
    左：0px；
    顏色：#FFFFFF；
    文字縮排：2em;
}
.pic備註
{
    顏色：#FFFFFF；
    文字裝飾：無；
}
.pic備註a：懸停
{
    文字修飾：底線；
}
.picaction
{
    位置：絕對；
    寬度：1000px；
    高度：50px；
    背景顏色：#000000;
    過濾器：alpha(不透明度=50);
    -moz-不透明度：0.5；
    不透明度：0.5；
    溢位：自動；
    底部：0px;
    左：0px；
    文字對齊：右；
}
.picaction a
{
    邊框：1px實線#C0C0C0;
    寬度：30px；
    高度：30px；
    浮動：右；
    行高：30px；
    文字裝飾：無；
    文字對齊：居中；
    顏色：#FFFFFF；
    字體粗細：粗體；
    上邊距：10px；
    顯示：塊；
    右距：10px；
}
.pic
{
    寬度：1000px；
    高度：400px；
    浮動：左；
}
.picselect
{
    背景顏色：#919191;
}

以上就是本文的全部內容了，實現的功能很實用，希望大家能夠喜歡。