純生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事件無法清除定時器，定時器函式定義後要再次將他呼叫，不然無法訪問使用。