案例（购物车以及轮播图javaScript）

style：
     * {
            margin: 0;
            padding: 0;
        }

        table {
            border: 1px solid gray;
            border-collapse: collapse;
            width: 500px;
            height: 200px;
            margin: 20px auto;
            text-align: center;
        }
        td,
        th {
            border: 1px solid white;
            background-color: lightblue;
        }

        th {
            background-color: darkseagreen;
        }

        button {
            width: 35px;
        }

html:

    <table&gt;
        <tr&gt;
            <th&gt;商品名称</th&gt;
            <th>数量</th>
            <th>单价</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>炒细面</td>
            <td>
                <button> - </button>
                <span class="SingleGoodNum">1</span>
                <button> + </button>
            </td>
            <td>
                单价：<span>10</span>
            </td>
            <td>
                小计：<span class="SingleGood-TotalPrice">0</span>
            </td>
            <td>
                操作：<input type="submit" value="删除">
            </td>
        </tr>
        <tr>
            <td>大闸蟹</td>
            <td>
                <button> - </button>
                <span class="SingleGoodNum">10</span>
                <button> + </button>
            </td>
            <td>
                单价：<span>298</span>
            </td>
            <td>
                小计：<span class="SingleGood-TotalPrice">0</span>
            </td>
            <td>
                操作：<input type="submit" value="删除">
            </td>
        </tr>
        <tr>
            <td colspan="5">一共<span id="AllGoods-TotalNums">0</span>件商品,共计花费<span id="AllGoods-TotalPrices">0</span>元。
            </td>
        </tr>
    </table>

script：

    let hBtns = document.getElementsByTagName("button")
    let hFnums = document.getElementsByClassName("SingleGoodNum");
    let hFPrices = document.getElementsByClassName("SingleGood-TotalPrice");
    let hANums = document.querySelector("#AllGoods-TotalNums");
    let hAPrices = document.querySelector("#AllGoods-TotalPrices");
    let hDBtns = document.getElementsByTagName("input");
    
    class Cart{
        constructor(hBtns,hFnums,hFPrices,hANums,hAPrices,hDBtns){
            this.hBtns = hBtns;增减键
            this.hFPrices = hFPrices;单餐合计价格
            this.hFnums = hFnums;单餐份数
            this.hANums = hANums;总合计餐数
            this.hAPrices = hAPrices;总合计价格
            this.hDBtns = hDBtns;删除键
        }
        总数与总价格更新
        updatehANumsAndhAPrices(){
            声明变量用来在循环中收集每一行菜品的数量
            let nums = 0;
            利用循环结构将每一行的菜品数量都加给声明好的变量，加法需要对innerhtml的字符串进行隐式转换
            for(var i = 0;i<this.hFnums.length;i++){
                nums+=this.hFnums[i].innerHTML/1;
            }
            总数，这里将收集起来的菜品数量赋值给总数
            this.hANums.innerHTML = nums;
            声明变量用来在循环中收集每一行菜品的价格小计
            let prices = 0;
            利用循环结构将每一行的菜品价格小计都加给声明好的变量，加法需要对innerhtml的字符串进行隐式转换
            for(var i = 0;i<this.hFPrices.length;i++){
                prices+=this.hFPrices[i].innerHTML/1;
            }
            总价格，这里将收集起来的菜品价格小计赋值给总价格
            this.hAPrices.innerHTML = prices;
        }
        加餐
        addFoods(btn){
            根据传入的参数btn（触发事件时被点击的加量按钮）来遍历菜品数量的元素位置
            let hFnums = btn.previousElementSibling;
            根据传入的参数btn（触发事件时被点击的加价按钮）来遍历菜品单价的元素位置
            let Price = btn.parentNode.nextElementSibling.firstElementChild;
            根据传入的参数btn（触发事件时被点击的加价按钮）来遍历菜品价格小计的元素位置
            let hFPrices = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
            hFnums.innerHTML = hFnums.innerHTML/1+1;
            计算单餐合计价格，公式为：小计 = 单价×数量，此处不需要隐式转换
            hFPrices.innerHTML = hFnums.innerHTML*Price.innerHTML;
             总数与总价格更新 每次加完餐品数量之后需要更新总价格和总菜品数量
            this.updatehANumsAndhAPrices();
        }
        减餐
        reduceFoods(btn){
            根据传入的参数btn（触发事件时被点击的减量按钮）来遍历菜品数量的元素位置
            let hFnums = btn.nextElementSibling;
            根据传入的参数btn（触发事件时被点击的减量按钮）来遍历菜品单价的元素位置
            let Price = btn.parentNode.nextElementSibling.firstElementChild;
            根据传入的参数btn（触发事件时被点击的减量按钮）来遍历菜品价格小计的元素位置
            let hFPrices = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
            菜品减量需要加上前提条件，不能减成负数
            if(hFnums.innerHTML>0){
                hFnums.innerHTML -=1;
            }
            
            计算单餐合计价格
            hFPrices.innerHTML = hFnums.innerHTML*Price.innerHTML;
            最后更新菜品总数和总价格
            this.updatehANumsAndhAPrices();
        }
        删除
        delBtn(btn){
            根据传入的参数btn（触发事件时被点击的删除按钮）来遍历需要删除的元素位置，也就是tr行，此处需要删除的元素tr是点击事件元素btn父元素td的父元素tr
            let hTr = btn.parentNode.parentNode;
            父元素移除
            hTr.remove();
            最后更新菜品总数和总价格
            this.updatehANumsAndhAPrices();
        }
        集合绑定所有事件，方便统一调用
        eventBind(){
            此处声明变量that保存一个指向为构造函数new对象的this，在事件体里面用that带入this
            let that = this;
            循环结构遍历加减button组成的数组
            for(let i = 0;i<this.hBtns.length;i++){
                设定条件，当button键为第偶数个，就是减量按钮，第奇数个就是加量按钮，然后根据if选择条件分别绑定点击事件，然后调用加量和减量函数
                if(i%2){
                    在类的方法里面调用类中方法的兄弟属性需要加上this，指代new创建的类对象中的该属性或元素，给对应元素绑定点击事件，此处选择第奇数个按钮，则调用加量函数事件体
                    this.hBtns[i].onclick = function(){
                        因为在事件体里面，直接使用this调用函数addFoods函数的话，此时的this在事件体重就代表触发该事件的元素，无法指向new创建的类对象，所以前面用变量that存一个指向类对象的this，在此处使用变量that等同于使用指向类对象的this
                        that.addFoods(this);
                    }
                }else{
                    第偶数条件下的按钮同样绑定点击事件，此处调用减量函数，用法同上
                    this.hBtns[i].onclick = function(){
                        that.reduceFoods(this);
                    }
                }
            }
            删除键也是利用循环结构绑定点击事件
            for(let i = 0;i<this.hDBtns.length;i++){
                this.hDBtns[i].onclick = function(){
                    that.delBtn(btn);
                }
            }
        }
    }
    let a = new Cart(hBtns,hFnums,hFPrices,hANums,hAPrices,hDBtns);
    a.eventBind();

二.轮播图案例

style：
    *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid ;
            position: relative;
            transition: 1s linear;
            background-size: 500px 300px;
        }
        ul{
            width: 80%;
            display: flex;
            position: absolute;
            bottom:15px ;
            left: 70px;
            justify-content: space-evenly;
        }
        li{
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
        #right{
            width: 30px;
            height: 30px;
            position: absolute;
            right: 10px;
            top: 45%;
        }
        #left{
            width: 30px;
            height: 30px;
            position: absolute;
            left: 10px;
            top: 45%;
        }

html：
    <div>
        <button id="right">></button>
        <button id="left"><</button>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

script：
    let hB = document.querySelector("div");图片框
    let hNext = document.querySelector("#right");向右按钮
    let hLeft = document.querySelector("#left");向左按钮
    let hLis = document.getElementsByTagName("li");底部切换按钮

    class Pic{
        constructor(hB,hNext,hLeft,hLis){
            this.hB = hB;
            this.hLeft = hLeft;
            this.hNext = hNext;
            this.hLis = hLis;
            this.eventBind();整合绑定事件调用
            this.index = 0;核心逻辑，通过改变index值改变背景图顺序和列表图标按钮
            this.hB.style.backgroundImage = `url(img/${this.index}.jpg)`;模板字符串嵌套变量index
        }
        高频次事件优先写，方便后面调用，此处方法描述背景图随着index值的变化而变化，列表图标按钮随着每一次index的变化进行循环确认对应的图标变红，其他图标保持黑色
        Lis(){
            根据index值改变背景图
            this.hB.style.backgroundImage = `url(img/${this.index}.jpg)`;
            循环结构确认和index值对应的下标对应的列表图标。
            for(let i = 0;i<this.hLis.length;i++){
                if(i == this.index){
                    与index新值对应的列表图标变红
                    this.hLis[i].style.backgroundColor = `red`;
                }else{
                    除了对应图标，其他图标保持黑色
                    this.hLis[i].style.backgroundColor = `black`;
                }
            }
        }
        列表图标点击事件，通过列表图标点击切换不同的背景图。
        onLis(){
            因为后面存在绑定点击事件体的函数，这里需要存一个this
            let that = this;
            循环结构确认被点击的li，为其绑定点击事件
            for(let i = 0;i<this.hLis.length;i++){
                this.hLis[i].onclick = function(){
                    为index赋上列表下标的值
                    that.index = i;
                    用这个值来改变背景图
                    that.Lis();
                }
            }
        }
        此处为右箭头按钮下一张事件方法
        Next(){
            每次事件触发index值自增
            this.index++;
            设置限定条件防止index自增越界，不能超过图片个数和列表下标数，当index达到li下标的最后一位，就给index赋值0，让他从第一位开始再次循环
            if(this.index == this.hLis.length){
                this.index = 0;
            }
            index值改变之后调用背景图与列表图标事件，改变背景图和图标变红的位置
            this.Lis();
        }
        此处为右箭头按钮上一张事件方法
        Left(){
            每次事件触发index值自减
            this.index--;
            设置限定条件防止index自增越界，不能超出图片个数和列表下标数，当index达到li下标的第一位的前一位，越界了，就给index赋值li末尾，让他从末位开始往前再次循环
            if(this.index == -1){
                this.index = this.hLis.length-1;
            }
            index值改变之后调用背景图与列表图标事件，改变背景图和图标变红的位置
            this.Lis();
        }
        自动轮播事件体
        Auto(){
            因为后面有鼠标移入移出的事件体绑定，此处需要存一个this；
            let that = this;
            let s;该变量是在为打开和关闭定时器做准备
            this.hB.onmouseout= function(){为banner盒子绑定鼠标移出事件启动计时器，因为如果只绑定移入停止，那么鼠标移入再移出计时器就彻底停止，自动轮播效果就没了，所以要在这里加上重新启动，保证自动轮播效果在鼠标移出后还能继续。
                s = setInterval(function(){
                that.onLis();计时器中的轮播方向只能有一个，要么向左要么向右，如果两个方向都写就不起作用了
                that.Next();
            },2000)
            }
            此处添加计时器在鼠标移入停止;前面声明的变量s在这里使用
            this.hB.onmouseover = function(){
                clearInterval(s);
            }
        }
        整合事件绑定方便统一调用
        eventBind(){
            let that = this;
            调用自动轮播效果
            this.Auto();
            左箭头按钮绑定向左切换效果
            this.hLeft.onclick = function(){
                that.Left();
            }
            右箭头按钮绑定向右切换效果
            this.hNext.onclick = function(){
                that.Next();
            }
            调用li点击切换背景图事件
            this.onLis();
            
        }
        
    }

    let a = new Pic(hB,hNext,hLeft,hLis);
    传参顺序不能乱，要和类内部constructor一致，调用函数不能少，this要齐全，遇到事件体要存一个this；