Jquery 實現圖片輪換，jquery圖片輪換

最後更新：2015-01-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

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

頁面+JS代碼

複製代碼代碼如下:
<script type="text/javascript">
        var picCurrent = 1;
        var picTotal = 8;
        var interval; //自動運行
        function picChange(current) {
            //停止當前動畫
            if ($("#divImg").is(":animated")) { $("#divImg").stop(); }
            picCurrent = current;
            //為當前選擇的設定樣式
            $("#divLink").find("a").removeClass("picselect")
            $("#divLink").find("a[title='" + picCurrent + "']").addClass("picselect");
            //設定下面的圖片說明
            var remark = "<a href=\"images/pic" + picCurrent + ".jpg\">";
            switch (picCurrent) {
                case 1: remark += " 菊花〔拉丁學名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊屬多年生草本... "; break;
                default: remark += picCurrent + "測試說明"; break;
            }
            remark += "</a>";
            $("#picremark").html(remark);
            //運行動畫
            $("#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>

複製代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>圖片切換</title>
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
    <link href="picchange.css" rel="stylesheet" type="text/css" />
    </head>
<body>
    <div class="picMain">
        <div class="picimg" id="divImg">
            <img src="images/pic1.jpg" class="pic" />
            <img src="images/pic2.jpg" class="pic" />
            <img src="images/pic3.jpg" class="pic" />
            <img src="images/pic4.jpg" class="pic" />
            <img src="images/pic5.jpg" class="pic" />
            <img src="images/pic6.jpg" class="pic" />
            <img src="images/pic7.jpg" class="pic" />
            <img src="images/pic8.jpg" class="pic" />
        </div>
        <div class="picaction" id="divLink">
            <a href="images/pic8.jpg" title="8" onclick=" return picChange(8)" class="">8</a> <a href="images/pic7.jpg" title="7" onclick=" return picChange(7)">7</a> <a href="images/pic6.jpg" title="6"
                    onclick=" return picChange(6)">6</a> <a href="images/pic5.jpg" title="5" onclick=" return picChange(5)">
                        5</a> <a href="images/pic4.jpg" title="4" onclick=" return picChange(4)">4</a>
            <a href="images/pic3.jpg" title="3" onclick=" return picChange(3)">3</a> <a href="images/pic2.jpg"
                title="2" onclick=" return picChange(2)">2</a> <a href="images/pic1.jpg" title="1"
                    onclick=" return picChange(1)" class="">1</a>
        </div>
        <div id="picremark" class="picRemark">
            測試介紹檔案了啊</div>
    </div>
</body>
</html>

css的實現

複製代碼代碼如下:
.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;
}

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Jquery 實現圖片輪換，jquery圖片輪換

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support