快捷導(dǎo)航

Jquery 實(shí)現(xiàn)圖片輪換

更新時間：2015年01月28日 11:09:46 投稿：hebedich

這篇文章主要介紹了Jquery 實(shí)現(xiàn)圖片輪換,雖然還有點(diǎn)小問題，但是影響不大，還是推薦給大家，需要的朋友可以參考下

網(wǎng)站首頁沒有一點(diǎn)動畫怎么可以，我以前用過Flash As3做過圖片切換，效果非常不錯，可是麻煩，改變起來麻煩。一直都想自己做個圖片切換效果，總認(rèn)為比較麻煩，今天自己實(shí)踐了一下，其實(shí)還比較簡單。不過有個小問題，IE8不兼容模式下設(shè)置有透明效果的div 樣式添加失效了，但是我用谷歌，IE8兼容測試都o(jì)k。

反正是給自己記錄的，也不多話了，js沒有與頁面分離，也沒有做出插件。一個網(wǎng)站要不了幾個這種效果，先實(shí)現(xiàn)了再說吧。最后的效果還是很高大上的。

頁面+JS代碼

復(fù)制代碼代碼如下:

<script type="text/javascript">

        var picCurrent = 1;

        var picTotal = 8;

        var interval; //自動運(yùn)行

        function picChange(current) {

            //停止當(dāng)前動畫

            if ($("#divImg").is(":animated")) { $("#divImg").stop(); }

            picCurrent = current;

            //為當(dāng)前選擇的設(shè)置樣式

            $("#divLink").find("a").removeClass("picselect")

            $("#divLink").find("a[title='" + picCurrent + "']").addClass("picselect");

            //設(shè)置下面的圖片說明

            var remark = "<a href=\"images/pic" + picCurrent + ".jpg\">";

            switch (picCurrent) {

                case 1: remark += " 菊花〔拉丁學(xué)名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊屬多年生草本... "; break;

                default: remark += picCurrent + "測試說明"; break;

            }

            remark += "</a>";

            $("#picremark").html(remark);

            //運(yùn)行動畫

            $("#divImg").animate({ left: -((picCurrent - 1) * 1000) + "px" }, "1000");

            return false;

        }

        //暫不需使用

        function PicPer() {

            if (picCurrent > 1) {

                picCurrent--;

            }

            else {

                picCurrent = picTotal;

            }

            picChange(picCurrent);

        }

        //下一張

        function PicNext() {

            if (picCurrent == picTotal) {

                picCurrent = 1

            }

            else {

                picCurrent++;

            }

            picChange(picCurrent);

        }

        //自動切換圖片

        function PicRun(functionName) {

            picChange(1);

            interval = setInterval(PicNext, "3000");

        }

        $(document).ready(function () {

            PicRun();

        });

    </script>

復(fù)制代碼代碼如下:

css的實(shí)現(xiàn)

復(fù)制代碼代碼如下:

.picMain

{

    margin: auto;

    overflow: hidden;

    width: 1000px;

    height: 400px;

    position: relative;

}

.picimg

{

    width: 10000px;

    height: 400px;

    background-color: #000000;

    position: absolute;

    top: 0px;

}

.picRemark

{

    position: absolute;

    width: 500px;

    height: 50px;

    bottom: 0px;

    left: 0px;

    color: #FFFFFF;

    text-indent: 2em;

}

.picRemark a

{

    color: #FFFFFF;

    text-decoration: none;

}

.picRemark a:hover

{

    text-decoration: underline;

}

.picaction

{

    position: absolute;

    width: 1000px;

    height: 50px;

    background-color: #000000;

    filter: alpha(opacity=50);

    -moz-opacity: 0.5;

    opacity: 0.5;

    overflow: auto;

    bottom: 0px;

    left: 0px;

    text-align: right;

}

.picaction a

{

    border: 1px solid #C0C0C0;

    width: 30px;

    height: 30px;

    float: right;

    line-height: 30px;

    text-decoration: none;

    text-align: center;

    color: #FFFFFF;

    font-weight: bold;

    margin-top: 10px;

    display: block;

    margin-right: 10px;

}

.pic

{

    width: 1000px;

    height: 400px;

    float: left;

}

.picselect

{

    background-color: #919191;

}