轮播图(改进版)

最新推荐文章于 2021-11-20 17:10:11 发布

a817480

最新推荐文章于 2021-11-20 17:10:11 发布

阅读量390

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zwer/p/10580884.html

版权

前言：

环境： window 10, 谷歌浏览器

需求

实现多个图片按一定时间逐个显示，并可以按鼠标选择对应的图书

代码

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;
}

使用纯 js

注意不能导入 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");
};

转载于:https://www.cnblogs.com/zwer/p/10580884.html