纯生JS轮播，定时器添加和清除定时器

js轮播笔记
代码实现了简单的文字左右切换和图片覆盖隐藏效果，点击方框按钮会切换图片及文字描述，鼠标放上图片时清除定时器

html

<div class="phoShow" id="phoShow">
    <ul class="phoUl" id="phoUl">
        <li class="phoShow"><a href="#"><img src="images/moShou.jpg" height="300" width="630"/></a></li>
        <li><a href="#"><img src="images/a1.jpg" height="300" width="630"/></a></li>
        <li><a href="#"><img src="images/a2.jpg" height="300" width="630"/></a></li>
        <li><a href="#"><img src="images/a3.jpg" height="300" width="630"/></a></li>
    </ul>
    <div class="outline">
        <div class="test">
            <ul class="clkUl" id="clkUl">
                <li>魔兽世界原画集</li>
                <li>随便乱编1</li>
                <li>不够充数2</li>
                <li>胡编乱插3</li>
            </ul>
        </div>
    </div>
    <div class="dots" id="dots"></div>
</div>
<script src="js/show.js"></script>

css

*{
    padding: 0;
    margin: 0;
}
ul,ol,li{
    list-style: none;
}
.clear{
    clear: both;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}
body{
    font-family:Arial,Verdana,"微软雅黑","宋体";
}
a{
    text-decoration: none;
}
.phoShow,
.phoUl,
.phoUl>li,
.phoUl>li>a{
    width: 630px;
    height: 300px;
}
.phoShow{
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
    position: relative;
    overflow: hidden;
}
.phoUl{
    overflow: hidden;
}
.phoUl>li{
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 1s;
    overflow: hidden;
}
.phoUl>li:not(.phoShow){
    opacity: 0;
}
.phoShow{
    opacity: 1;
}
.phoUl>li>a{
    display: block;
}
.outline,
.test,
.clkUl,
.clkUl>li{
    height: 74px;
}
.outline{
    position: absolute;
    width: 630px;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
}
.test{
    width: 126px;
    margin-left: 55px;
    z-index: 10;
    overflow: hidden;
}
.clkUl{
    width: 504px;
    transition: all 0.2s;
}
.clkUl>li{
    float: left;
    font-size: 18px;
    width: 126px;
    line-height: 74px;
    color: #ffffff;
}
.phoShow{
    animation: show 0.5s both;
}
.dots{
    position: absolute;
    right: 35px;
    bottom: 29px;
    height: 16px;
    z-index: 20;
}
.dots span{
    display: inline-block;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}
.dots .on{
    background: #b60973;
    animation: show 0.2s both;
}
@keyframes show {
    0%{
        transform: scale(1.2) rotateZ(60deg);
    }
    100%{
        transform: scale(1) rotateZ(0deg);
    }
}

js

{
	let phoDiv = document.getElementById("phoShow");// 获取整个板块的div
    let phoUl = document.getElementById("phoUl");  // 获取装图片的ul
    let clkUl = document.getElementById("clkUl");  // 获取图片上的文字的ul
    let dots = document.getElementById("dots");    // 获取切换图片按钮div
    let picCd = phoUl.children;  // 获取装每一个图片的li
    let listCd = dots.children;  // 获取每个图片上文字的li
    let index = 0;  // 初始化索引
    let myset = null;  // 初始化定时器变量
    let moveFun = function (index) {  // 让图片轮播的函数
        clkUl.style.marginLeft = -126 * index + "px" ;  // 每次执行函数让图片对应的文字显示出现
        for (let j = 0; j < picCd.length; j++) {        // 循环图片的长度
            listCd[j].classList.remove("on");           // 去除全部按钮的class样式
            picCd[j].classList.remove("phoShow");       // 去除全部图片的class样式
        }
        listCd[index].classList.add("on");              // 给展示出来的按钮添加样式
        picCd[index].classList.add("phoShow");          // 给展示出来的图片添加样式
    };
    for (let i = 0; i < picCd.length; i++) {
        let newSpan = document.createElement("span");   // 根据图片的个数创造按钮
        dots.appendChild(newSpan);                      // 将按钮加到div中
        ( i === 0 )&&( newSpan.classList.add("on"));    // 给第一个按钮添加样式
        listCd[i].addEventListener("click",function () {// 点击每个按钮执行函数
            moveFun(i);     // 执行轮播函数
            index = i;      // 点击第几个按钮就将索引重置为几
        });
    }
    let IntervalFun = function(){           // 定义定时器函数
        myset = setInterval(function () {
            index++;                        // 每次执行函数就让索引自加
            if (index >= picCd.length) {    // 如果索引大于图片个数就重置索引，意味着轮播重新开始
                index = 0;
            }
            moveFun(index);                 // 调用轮播函数，传入索引值
        },2000);                            // 定时器每两秒执行一次
    };
    phoDiv.addEventListener("mouseenter",function () {   // 鼠标放上图片时停止定时器
        clearInterval( myset );
    });
    phoDiv.addEventListener("mouseleave",function () {   // 鼠标移开图片时重新开始定时器
        IntervalFun();      // 调用定时器函数
    });
    IntervalFun();     // 实例化定时器函数
}

myset变量要先在函数外部定义，不然后面的mouseenter事件无法清除定时器，定时器函数定义后要再次将他调用，不然无法访问使用。