轮播图js封装

最新推荐文章于 2022-04-02 22:20:42 发布

Ninety`

最新推荐文章于 2022-04-02 22:20:42 发布

阅读量190

点赞数

分类专栏：第二阶段javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_52597660/article/details/111501403

版权

第二阶段javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

轮播图

/* 
*作用：轮播图
*@parent1 {object} elem：标签 轮播图可视区
*@parent2 {object} elem：标签 圆点父元素
*/
function changeimg(parent1, parent2) {
    var oUl = parent1.getElementsByTagName("ul")[0];
    var oLi = oUl.getElementsByTagName("li");
    var oSpan = parent2.getElementsByTagName("span");
    var n = 0;
    var stop1 = setInterval(auto, 2000);
    function auto() {
        n++;
        if (n >= oLi.length) {
            n = 0;
        }
        running(oUl, "left", 80, -600 * n);//0 -600 -1200 -1800
    }

    var stop2 = setInterval(circle, 2000);
    function circle() {
        n++;
        if (n > oSpan.length) {
            n = 0;
        }
        for (var j = 0; j < oSpan.length; j++) {
            oSpan[j].style.backgroundColor = "skyblue";
        }
        oSpan[--n].style.backgroundColor = "orange";
    }

    for (var i = 0; i < oLi.length; i++) {
        oSpan[i].index = i;
        oSpan[i].onclick = function () {
            clearInterval(stop1);
            clearInterval(stop2);
            n=this.index;
            oUl.style.left = -600 * (this.index) + "px";
            for (var j = 0; j < oSpan.length; j++) {
                oSpan[j].style.backgroundColor = "skyblue";
            } 
            oSpan[this.index].style.backgroundColor = "orange";
        }
        oLi[i].onmouseover = function () {
            clearInterval(stop1);
            clearInterval(stop2);
        }
        oLi[i].onmouseout = function () {
            stop1 = setInterval(auto, 2000);
            stop2 = setInterval(circle, 2000);
        }
    }
}

//运动封装
获取元素的样式
运动元素

/* 
*作用：获取元素的样式
*@parm {object} elem：标签
*@parm {string} attr：属性
*/
function getStyle(elem,attr) {//标签：elem  属性：attribute
    if (window.getComputedStyle) {
        //标准
        var w = getComputedStyle(elem)[attr];
    } else {
        //ie
        var w = elem.currentStyle[attr];
    }
   return w;
}


/* 
*作用：运动元素
*@parm {object} elem：标签
*@parm {string} attr：属性
*@parm {number} step：步长
*@parm {number} target：目标值
*/
function running(elem,attr,step,target) {
    //当前值   目标值
     //0       500     +
     //500     0       -
    step = parseInt(getStyle(elem, attr))<target ? step : -step;
    clearInterval(elem.timer);
    elem.timer = setInterval(function () {
        //4.计算运动值  在当前位置的基础上+10
        var l = parseInt(getStyle(elem, attr)) + step

        //5.停止定时器
        if ((l >= target && step>0) || (l <= target && step<0)) {
            l = target;
            clearInterval(elem.timer);
        }

        //3.移动div
        elem.style[attr] = l + "px";

    }, 30);
}

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border: 2px solid teal;
            position: relative;
            overflow: hidden;
        }

        .box ul {
            width: 2400px;
            position: absolute;
            left: 0px;
        }

        .box li {
            float: left;
        }

        .box p {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }

        .box p span {
            display: inline-block;
            width: 15px;
            height: 15px;
            background: skyblue;
            border-radius: 50%;
            margin-right: 5px;
        }

        .box p .active {
            background: orange;
        }

        .jiantou {
            display: inline-block;
            width: 50px;
            height: 80px;
            background-image: url(./image/btn_show.png);
            background-repeat: no-repeat;
        }

        .last {
            position: absolute;
            top: 40%;
            left: 0;
            background-position: 0 -80px;
        }

        .next {
            position: absolute;
            top: 40%;
            right: 0;

        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 可视区 -->
        <!-- 图片列表 -->
        <ul>
            <li><img src="./image/t1.png" alt=""></li>
            <li><img src="./image/t2.png" alt=""></li>
            <li><img src="./image/t3.png" alt=""></li>
            <li><img src="./image/t4.png" alt=""></li>
        </ul>
        <p><span class='active'></span><span></span><span></span><span></span></p>
        <span class="jiantou last"></span>
        <span class="jiantou next"></span>
    </div>

    <script src="./运动封装.js"></script>
    <script src="./轮播封装.js"></script>
    <script>
        var oBox = document.getElementsByTagName("div")[0];
        var oP = document.getElementsByTagName("p")[0];
        var oS = oBox.getElementsByTagName("p");
        changeimg(oBox, oP);
       
    </script>
</body>

</html>