輪播圖(改進版)

時間 2019-11-19

標籤改進简体版

原文原文鏈接

前言：

環境： window 10, 谷歌瀏覽器css

需求

實現多個圖片按必定時間逐個顯示，並能夠按鼠標選擇對應的圖書html

代碼

html

<html>
<head>
    <title>輪播圖</title>
    <!-- 導入輪播 CSS  -->
    <link rel="stylesheet"  href="autoPlay.css"/>
    <!-- 導入輪播 JS    -->
    <script type="text/javaScript" src="autoPlay.js"></script>
    
</head>
<body>
<!-- 圖書商場首頁輪播圖  start -->
    <div id="box_autoplay">
        <div class="list">
            <ul>
                <li><img src="ad/index_ad1.jpg" width="660px" height="255px" /></li>
                <li><img src="ad/index_ad2.jpg" width="660px" height="255px" /></li>
                <li><img src="ad/index_ad3.jpg" width="660px" height="255px" /></li>
                <li><img src="ad/index_ad4.jpg" width="660px" height="255px" /></li>
                <li><img src="ad/index_ad5.jpg" width="660px" height="255px" /></li>
            </ul>
        </div>
    </div>
</body>
</html>

body, div, ul, li {
    margin:0;
    padding:0;
}
ul {
    list-style-type:none;
}
#box_autoplay {
position:relative;
width:660px;
height:255px;
background:#fff;
border-radius:5px;
border:8px solid #fff;
margin:10px auto;
cursor:pointer;
}
#box_autoplay .list {
    position:relative;
    width:660px;
    height:255px;
    overflow:hidden;
}
#box_autoplay .list ul {
    position:absolute;
    top:0;
    left:0;
}
#box_autoplay .list li {
    width:660px;
    height:255px;
    overflow:hidden;
}
#box_autoplay .count {
    position:absolute;
    right:0;
    bottom:5px;
}
#box_autoplay .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_autoplay .count li.current {
    color:#fff;
    opacity:1;
    filter:alpha(opacity=100);
    font-weight:700;
    background:#f60;
}

使用純 jsjava

注意不能導入 JQuery 庫，否則會致使程序出錯（以下圖所示）。
瀏覽器

//獲取ID
var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id;};
//獲取tagName
var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName);};
//自動播放對象
var AutoPlay = function (id) {this.initialize(id);};
AutoPlay.prototype = {
    initialize: function (id)
    {
        var oThis = this;
        this.oBox = $(id);
        this.oUl = $$("ul", this.oBox)[0];
        this.aImg = $$("img", this.oBox);
        this.timer = null;
        this.autoTimer = null;
        this.iNow = 0;
        this.creatBtn();
        this.aBtn = $$("li", this.oCount);
        this.toggle();
        this.autoTimer = setInterval(function ()
        {
            oThis.next();
        }, 3000);
        this.oBox.onmouseover = function ()
        {
            clearInterval(oThis.autoTimer);
        };
        this.oBox.onmouseout = function ()
        {
            oThis.autoTimer = setInterval(function ()
            {
                oThis.next();
            }, 3000);
        };
        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: function ()
    {
        this.oCount = document.createElement("ul");
        this.oFrag = document.createDocumentFragment();
        this.oCount.className = "count";
        for (var i = 0; i < this.aImg.length; i++)
        {
            var oLi = document.createElement("li");
            oLi.innerHTML = i + 1;
            this.oFrag.appendChild(oLi);
        }
        this.oCount.appendChild(this.oFrag);
        this.oBox.appendChild(this.oCount);
    },
    toggle: function ()
    {
        for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
        this.aBtn[this.iNow].className = "current";
        this.doMove(-(this.iNow * this.aImg[0].offsetHeight));
    },
    next: function ()
    {
        this.iNow++;
        this.iNow == this.aBtn.length && (this.iNow = 0);
        this.toggle();
    },
    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_autoplay");
};

純 JS 改進版

/**
 *      用 純 js 文件寫自動輪播圖，最好不要用 $ 做爲 函數名
 *      否則後期因爲業務需求使用 Jquery 庫，會致使 用 純Js 寫$ 函數失效，致使程序發生問題    
 *  
 * **/

//獲取ID
var getID = function(id) {
    return typeof id === "string" ? document.getElementById(id) : id;
};
//獲取tagName
var getTageOP = function(tagName, oParent) {
    return (oParent || document).getElementsByTagName(tagName);
};
//自動播放對象
var AutoPlay = function(id) {
    this.initialize(id);
};
AutoPlay.prototype = {
    initialize : function(id) {
        var oThis = this;
        this.oBox = getID(id);
        this.oUl = getTageOP("ul", this.oBox)[0];
        this.aImg = getTageOP("img", this.oBox);
        this.timer = null;
        this.autoTimer = null;
        this.iNow = 0;
        this.creatBtn();
        this.aBtn = getTageOP("li", this.oCount);
        this.toggle();
        this.autoTimer = setInterval(function() {
            oThis.next();
        }, 3000);
        this.oBox.onmouseover = function() {
            clearInterval(oThis.autoTimer);
        };
        this.oBox.onmouseout = function() {
            oThis.autoTimer = setInterval(function() {
                oThis.next();
            }, 3000);
        };
        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 : function() {
        this.oCount = document.createElement("ul");
        this.oFrag = document.createDocumentFragment();
        this.oCount.className = "count";
        for (var i = 0; i < this.aImg.length; i++) {
            var oLi = document.createElement("li");
            oLi.innerHTML = i + 1;
            this.oFrag.appendChild(oLi);
        }
        this.oCount.appendChild(this.oFrag);
        this.oBox.appendChild(this.oCount);
    },
    toggle : function() {
        for (var i = 0; i < this.aBtn.length; i++)
            this.aBtn[i].className = "";
        this.aBtn[this.iNow].className = "current";
        this.doMove(-(this.iNow * this.aImg[0].offsetHeight));
    },
    next : function() {
        this.iNow++;
        this.iNow == this.aBtn.length && (this.iNow = 0);
        this.toggle();
    },
    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_autoplay");
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。