輪播圖

時間 2019-11-09
原文原文鏈接
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自動輪播廣告（面向對象版）</title>
    <style>
        /*把body,div,ul,li的內外邊距所有重置爲0，並在下面從新設置，以保證輪播圖在各瀏覽器中展現的效果一致*/

        body, div, ul, li {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;  /*去除列表樣式*/
        }

        body {
            background: #000; /*文檔背景色設置爲黑色*/
            text-align: center; /*居中對齊*/
            font: 12px/20px Arial;/*設置字號，行間距和字體*/
        }

        #box {
            position: relative;/*這是最外部的div包含元素，需設置爲相對*/
            width: 492px;
            height: 172px;
            background: #fff;/*輪播圖框背景設置爲白色*/
            border-radius: 5px;
            border: 8px solid #fff;
            margin: 10px auto;
            cursor: pointer;
        }

            #box .list {
                position: relative;/*這是第2個div包含元素，需設置爲相對*/
                width: 490px;/*內部div高度比外部div少2px，以此組成2px寬的外邊框*/
                height: 170px;
                overflow: hidden;
            }

                #box .list ul {
                    position: absolute; /*內部輪播圖的定位，須設置爲絕對*/
                    top: 0;
                    left: 0;
                }

                #box .list li {
                    width: 490px;
                    height: 170px;
                    overflow: hidden;
                }

                 /*count元素由script動態生成，定位於父元素的右下角*/
            #box .count {
                position: absolute;
                right: 0;
                bottom: 5px;
            }

                #box .count li {
                    color: #fff;/*輪播圖按鈕字體設置爲白色*/
                    float: left;
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                    margin-right: 5px;
                    overflow: hidden;
                    background: #F90;/*輪播圖按鈕背景色設置爲棕色*/
                    opacity: 0.7;/*透明度*/
                    filter: alpha(opacity=70);/*兼容老瀏覽器*/
                    border-radius: 20px;
                }

                    #box .count li.current {
                        color: #fff;/*輪播圖選中按鈕字體色彩設置爲白色*/
                        opacity: 1;
                        filter: alpha(opacity=100);
                        font-weight: 700;
                        background: #f60;/*輪播圖按鈕背景色設置爲深棕色*/
                    }

        #tmp {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
//獲取ID（此函數爲原代碼全部）
       // var $ = function (id) {
            //使用tpeof操做符檢測傳入的參數是否爲字符串，爲真，則傳遞給getElementById命令，返回一個對象
            //在下面的代碼中，將使用此函數獲取文檔最外層的id名爲"box"的元素引用。
           // return typeof id === "string" ? document.getElementById(id) : id
        //};

        //獲取tagName（此函數爲原代碼全部）
        //var $$ = function (tagName, oParent) {
            //此函數便是傳入由獲取id函數返回的對象，並用此對象調用getElementsByTagName方法，獲取內部標籤名，
            //最後返回一個由標籤名構成的數組。
           // return (oParent || document).getElementsByTagName(tagName)
       // };

//自動播放對象
        var AutoPlay = function (id) {
            //定義對象，此對象有一個方法，接受名爲"id"的參數。
            this.initialize(id)
        };
        //給AutoPlay對象添加原型字面量，由多個方法和屬性組成
        //在變量命名方面，使用了匈牙利命名法，
AutoPlay.prototype = {
    initialize: function (id)
    {
        //把this賦值給oThis，由於當函數以函數方式調用時，this指針會被錯誤綁定到全局對象上，
        //進而沒法訪問內部各屬性與方法，採用這種方式就可避免此問題
        //一般會命名爲that或self,此處採用匈牙利命名法,oThis中的"o"，表示是一引用類型
        var oThis = this;

        //調用$函數，獲取最外層的div引用，可用下面這行代碼替換
        //this.oBox = $(id);
        this.oBox = document.getElementById("box");

        //獲取div元素中的無序列表ul中的第一項引用
        //this.oUl = $$("ul", this.oBox)[0];
        this.oUl = document.getElementById("box").getElementsByTagName("ul")[0];
        //this.oUl = this.oBox.getElementsByTagName("ul")[0];

        //獲取img對象
        //this.aImg = $$("img", this.oBox);
        this.aImg = document.getElementById("box").getElementsByTagName("img");
        //this.aImg = this.oBox.getElementsByTagName("img");

        //定義計時器，值爲null表示其值應爲一個對象
        this.timer = null;

        //定義自動計時器，值爲null表示它的值應爲一個引用（對象）
        this.autoTimer = null;

        //當前輪播圖按鈕索引值，i表示它應爲整型
        this.iNow = 0;

        //利用script動態建立輪播圖按鈕
        this.creatBtn();

        //獲取按鈕
        //this.aBtn = $$("li", this.oCount);
        this.aBtn = this.oCount.getElementsByTagName("li");

        //聲明切換方法
        this.toggle();

        //定義自動計時器，每3000毫秒(每3秒)切換至下一張圖片
        this.autoTimer = setInterval(function ()
        {
            oThis.next()
        }, 3000);

        //註冊"mouseover"事件處理程序，當鼠標移入出後，清除自動計時器，此時圖片靜止，中止切換
        this.oBox.onmouseover = function ()
        {
            clearInterval(oThis.autoTimer)
        };

        //註冊"mouseout"事件處理程序，當鼠標移出後，恢復自動計時器，自動切換
        this.oBox.onmouseout = function ()
        {
            oThis.autoTimer = setInterval(function ()
            {
                oThis.next()
            }, 3000)
        };

        //for循環遍歷輪播圖按鈕，註冊mouseover事件處理程序，當鼠標指針懸浮懸浮於按鈕上時，
        //調用toggle()方法，切換至此圖
        for (var i = 0; i < this.aBtn.length; i++)
        {
            this.aBtn[i].index = i;
            this.aBtn[i].onmouseover = function ()
            {
                oThis.iNow = this.index;
                oThis.toggle()
            }
        }
    },

    //定義creatBtn方法
    creatBtn: function ()
    {
        //建立ul元素
        this.oCount = document.createElement("ul");

        //建立文檔片斷對象，將建立的li元素附着在片斷對象上，最後再添加到ul元素上
        this.oFrag = document.createDocumentFragment();

        //添加類名
        this.oCount.className = "count";

        //for循環建立li元素，並添加到文檔片斷對象上
        for (var i = 0; i < this.aImg.length; i++)
        {
            var oLi = document.createElement("li");
            oLi.innerHTML = i + 1;//輪播圖片序號
            this.oFrag.appendChild(oLi)
        }
        //把文檔片斷添加到ul元素上
        this.oCount.appendChild(this.oFrag);

        //把ul添加到div元素上
        this.oBox.appendChild(this.oCount)
    },

    //定義toggle方法
    toggle: function ()
    {
        //遍歷按鈕並設置其類名爲空
        for (var i = 0; i < this.aBtn.length; i++)
            this.aBtn[i].className = "";
        //爲要切換至的圖片設置類名
        this.aBtn[this.iNow].className = "current";
        //調用doMove方法，並傳入偏移量
        this.doMove(-(this.iNow * this.aImg[0].offsetHeight))
    },

    //定義next()方法
    next: function ()
    {
        this.iNow++;
        this.iNow == this.aBtn.length && (this.iNow = 0);
        this.toggle()
    },

    //定義doMove方法
    doMove: function (iTarget)
    {
        var oThis = this;
        clearInterval(oThis.timer);
        oThis.timer = setInterval(function ()
        {
            var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px")
        }, 30)
    }
};
//註冊頁面加載事件
window.onload = function ()
{
    new AutoPlay("box");
};
    </script>
</head>
<body>
    <!--文檔主體結構由兩個dvi包裹一個ul無序列表構成，內外div大小差2px，構成一個白色的方框，包裹着輪播圖-->
    <div id="box">
        <div class="list">
            <ul>
                <li><img src="img/01.jpg" width="490" height="170" /></li>
                <li><img src="img/02.jpg" width="490" height="170" /></li>
                <li><img src="img/03.jpg" width="490" height="170" /></li>
                <li><img src="img/04.jpg" width="490" height="170" /></li>
                <li><img src="img/05.jpg" width="490" height="170" /></li>
            </ul>
        </div>
    </div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。