zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    hive与hbase整合
    待重写
    hive DML
    【知识强化】第六章 总线 6.1 总线概述
    【知识强化】第五章 中央处理器 5.1 CPU的功能和基本结构
    【知识强化】第四章 指令系统 4.3 CISC和RISC的基本概念
    【知识强化】第四章 指令系统 4.2 指令寻址方式
    【知识强化】第四章 指令系统 4.1 指令格式
    【知识强化】第三章 存储系统 3.6 高速缓冲存储器
    【知识强化】第三章 存储系统 3.5 双口RAM和多模块存储器
  • 原文地址:https://www.cnblogs.com/kymming/p/12856646.html
Copyright © 2011-2022 走看看