js插件简单封装

1.参考网站（https://www.jianshu.com/p/937c6003851a）

2.实现一个图片无限循环的插件封装

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片无限循环</title>
</head>

<body>
    <div class="container" id="container">
        <ul class="wrapper">
            <li class="slide"><img src="img/1.jpg" alt></li>
            <li class="slide"><img src="img/2.jpg" alt></li>
            <li class="slide"><img src="img/3.jpg" alt></li>
            <li class="slide"><img src="img/4.jpg" alt></li>
        </ul>
    </div>
</body>
<script>
    // var oContainer = document.querySelector(".container");
    // var oWrapper = document.querySelector("ul");
    // var oSlide = document.querySelectorAll("li");
    // var wrapperW = oSlide[0].offsetWidth * oSlide.length;
    // // 复制一遍li总长度，实现无缝连接
    // oWrapper.style.width = wrapperW * 2 + "px";
    // oWrapper.innerHTML += oWrapper.innerHTML;
    // if (wrapperW < oContainer.offsetWidth) {
    //     oContainer.style.width = wrapperW + "px";
    // }
    // var i = 0, timer = null;
    // var sliderMove = function () {
    //     timer = setInterval(function () {
    //         // i++;
    //         if (i > wrapperW) {
    //             i = 0;
    //         }
    //         oWrapper.style.transform = 'translate(' + (-i) + 'px)';
    //     }, 10)
    // }
    // sliderMove();
    // oContainer.addEventListener("mouseover", function () {
    //     clearInterval(timer);
    // })
    // oContainer.addEventListener("mouseout", function () {
    //     sliderMove(timer);
    // })
    var $$ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    }
    // 创建一个构造函数
    function FreeSlider(dom, speed) {
        this.oContainer = dom;
        this.oWrapper = this.oContainer.querySelector('ul');
        this.oSlide = this.oWrapper.querySelectorAll('li');
        this.ContainerW = this.oContainer.offsetWidth;
        this.wrapperW = this.oSlide[0].offsetWidth * this.oSlide.length;
        this.speed = speed || 1000;
        this.i = 0;
        this.timer = null;
        this.init();
    }
    FreeSlider.prototype = {
        constructor: FreeSlider,
        init: function () {
            this.oWrapper.style.width = this.wrapperW * 2 + "px";
            this.oWrapper.innerHTML += this.oWrapper.innerHTML;
            if (this.ContainerW > this.wrapperW) {
                this.oContainer.style.width = this.wrapperW + "px";
            };
            this.slideMove();
            this.slideEvent();
        },
        slideEvent: function () {
            var self = this;
            this.oContainer.addEventListener("mouseover", function () {
                self.stopMove();
            });
            this.oContainer.addEventListener("mouseout", function () {
                self.slideMove();
            });
        },
        slideMove: function () {
            var that = this;
            this.timer = setInterval(function () {
                // that.i++;
                if (that.i > that.wrapperW) {
                    that.i = 0;
                }
                that.oWrapper.style.transform = 'translate(' + (-that.i) + 'px)';
            })
        },
        stopMove: function () {
            clearInterval(this.timer);
        }
    }
    new FreeSlider($$('container'), 30);
</script>

</html>
body, ul, li {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

.container {
    height: 300px;
    margin: 100px auto;
    padding: 60px 0;
    overflow: hidden;
}

.container ul {
    display: -webkit-flex;
    display: flex;
    height: 100%;
}

.container ul li {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 0;
    width: 400px;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    -webkit-transition: all .6s;
    transition: all .6s;
}

.container ul li:hover {
    z-index: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.container ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
    border: 10px solid #fff;
    box-shadow: 0 0 5px #333;
}

 

posted @ 2020-05-09 13:05  宫圆薰  阅读(768)  评论(0)  编辑  收藏  举报