day12JavaScript实现无缝轮播

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    div#cont {
        width: 960px;
        height: 320px;
        border: 1px solid #000;
        margin: 50px auto;
        position: relative;
        overflow: hidden;
    }

    div#cont ul {
        height: 320px;
        /* width: 3840px; */
        width: 4800px;
        /*  所有图片的宽度的和 */
        position: absolute;
        left: 0;
        top: 0;
    }

    div#cont ul li {
        float: left;
        width: 960px;
        height: 320px;
    }

    div#cont p {
        width: 100%;
        height: 20px;
        position: absolute;
        bottom: 20px;
        left: 0;
        text-align: center;
    }

    div#cont p span {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin: 0 5px;
        background: blue;
        color: #fff;
    }

    div#cont p span.active {
        background: red;
    }
</style>

<div id="cont">
    <ul>
        <li><img src="./img/1.jpg" alt=""></li>
        <li><img src="./img/2.jpg" alt=""></li>
        <li><img src="./img/3.jpg" alt=""></li>
        <li><img src="./img/4.jpg" alt=""></li>
        <li><img src="./img/1.jpg" alt=""></li>
    </ul>
    <p>
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </p>
</div>
</body>
<script>
    /*
        1. 进入页面后 每隔3s 换一张图
        2. 鼠标滑上  停止定时器
        3. 鼠标划下 开启定时器
        4. 点击左箭头 图片要切换上一张  4--3--2--1--4
        5. 点击右箭头 图片切换到下一章 1--2-3-4-1
        6. 点击小圆点  图片切换到对应的下标位置

        无缝轮播的原理: 
            在ul的最后多加一个li  这个li中放第一张图
            当li切换到最后一个的时候  一瞬间拉回到第一张
    */
    // 1. 进入页面后 每隔3s 换一张图
    var ul = document.getElementsByTagName('ul')[0];
    var lis = document.getElementsByTagName('li');
    var spans = document.getElementsByTagName('span');
    console.log(ul);

    // 不知道是第几张图 假设 0---1---2
    var n = 0;

    // 获取一张图片的宽度
    var div = document.getElementById('cont');
    var cw = div.clientWidth;

    // 开启定时器 让ul每隔3s移动一次
    setInterval(function(){
        n++;
        // console.log(n);
        if(n == lis.length){ // 已经到达最后一张
            n = 0;
            // ul的left也需要拉回到0
            ul.style.left = 0 + 'px';
            // 需要紧跟着切换到下一章
            n = 1;
        }
        // ul.style.left = -n * cw + 'px';
        move(ul, 'left', 60, -n * cw);

        // 小圆点的样式跟随改变 小圆点和图片的关系  一一对应  下标相同
        for(var i = 0; i < spans.length; i++){
            spans[i].className = '';
        }
        // 如果n是最后一张图 这时候小圆点应该显示第一个
        console.log(n);
        spans[n == lis.length - 1 ? 0 : n].className = 'active';
    }, 2000);