JS 轮播图

实现功能

1.在没有点击和经过的时候图片和小圆点自动切换
2.点击小圆点的时候切换图片
3.上翻页和下翻页

实现效果

为了效果更明显更容易理解所以没溢出隐藏

实现方法1

上图利用定位控制图片的移动

<div class="box">
        <ul class='count'>
            <li>
                <img src="./one_piece-001.jpg" alt="">
            </li>
            <li>
                <img src="./one_piece-004.jpg" alt="">
            </li>
            <li>
                <img src="./one_piece-005.jpg" alt="">
            </li>
            <li>
                <img src="./one_piece-009.jpg" alt="">
            </li>
            <li>
                <img src="./one_piece-001.jpg" alt="">
            </li>
        </ul>
        <div class="list">
            <p class='on'></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="left"><</div>
        <div class="right">></div>
    </div>

li {
            list-style: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: auto;
            width: 700px;
            height: 500px;
            background-color: #ccc;
            /* overflow: hidden; */
            position: relative;
        }

        .count {
            width: 35000px;
            display: flex;
            position: absolute;
            left: 0;
            top: 0;
        }

        .count li {
            width: 700px;
            height: 500px;
        }
		/*图片的宽高和大盒子宽高相等*/
        .count li img {
            width: 700px;
            height: 500px;
        }

        .list {
            display: flex;
            position: absolute;
            right: 0;
            bottom: 0;
            margin-right: 50px;
            margin-bottom: 30px;
        }

        .list p {
            width: 20px;
            height: 20px;
            /* background-color: peru; */
            border-radius: 50%;
            margin: 10px;
            border: 1px solid #f00;
        }

        .on {
            background-color: #f00;
        }

        .left,
        .right {
            width: 60px;
            height: 60px;
            background-color: #666;
            font-size: 30px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            position: absolute;
            opacity: .8;
        }

        .left {
            left: 0;
            top: 200px;
        }

        .right {
            right: 0;
            top: 200px;
        }

//获取元素
            var oUl = document.querySelector('ul');
            var oP = document.querySelectorAll('p');
            var prev = document.querySelector('.left');
            var next = document.querySelector('.right');
            //定义第几张图片
            var index = 0;

            //设置定时器
            var bigTimer;

            var flag;

            autoplay()
            //自动播放
            function autoplay() {
                clearInterval(bigTimer)
                bigTimer = setInterval(function () {
                    index++;
                    move(oUl, -700 * index, 20, 'left', function () {
                        // 小运动和大定时器之间的时间差
                        if (index == 4) {
                            index = 0;
                            oUl.style.left = 0;
                        }
                    })
                    dot()

                }, 2500)
            }

            //图片滚动时下面的圈圈跟着移动
            function dot() {
                for (var i = 0; i < oP.length; i++) {
                    oP[i].classList.remove('on');
                }

                if (index == 4) {
                    oP[0].classList.add('on');
                } else {
                    oP[index].classList.add('on')
                }
            }

            //点击对应的小圆点，显示对应的图片
            oP.forEach(function (val, i) {
                val.onclick = function () {
                    if (flag && i !== index) {
                        clearInterval(bigTimer);
                        index = i;
                        dot();

                        move(oUl, -700 * index, 20, 'left', function () {
                            if (index == 4) {
                                index = 0;
                                oUl.style.left = 0;
                            }
                        })
                    }
                    //不点击的话就继续播放
                    autoplay()
                }
            })

            prev.onclick = function () {
                if (flag) {
                    clearInterval(bigTimer);
                    if (index == 0) {
                        index = 4;
                        oUl.style.left = -index * 700 + 'px'
                    }
                    index--;
                    dot();
                    move(oUl, -700 * index, 20, 'left', function () {
                        // 小运动和大定时器之间的时间差
                        if (index == 4) {
                            index = 0;
                            oUl.style.left = 0;
                        }
                    })
                    autoplay()
                }
            }

            next.onclick = function () {
                if (flag) {
                    clearInterval(bigTimer);
                    index++;
                    dot();
                    move(oUl, -700 * index, 20, 'left', function () {
                        // 小运动和大定时器之间的时间差
                        if (index == 4) {
                            index = 0;
                            oUl.style.left = 0;
                        }
                    })
                    autoplay()
                }
            }

            //运动函数
            // move(oUl, -35000, 20, 'left')
            function move(ele, end, speed, prop, cb) {
                flag = false;
                // 获取初始位置
                var start = parseInt(getStyle(ele, prop));
                // 速度
                speed = (end > start) ? speed : -speed;
                var t = setInterval(function () {
                    start += speed;
                    ele.style[prop] = start + 'px';
                    if (Math.abs(start - end) < Math.abs(speed)) {
                        start = end;
                        clearInterval(t);
                        flag = true;
                        // 防止运动过头
                        ele.style[prop] = start + 'px';

                        // 运动结束之后做其他事情   -- 调用
                        // if(cb) {
                        //     cb() 
                        // }
                        cb && cb()
                    }
                }, 10)
            }

            //做兼容
            function getStyle(ele, prop) {
                if (window.getComputedStyle) {
                    return getComputedStyle(ele)[prop]
                }
                return ele.currentStyle[prop]
            }

            //鼠标失去焦点的时候清除定时器
            window.onblur = function () {
                clearInterval(bigTimer)
            }
            window.onfocus = function () {
                autoplay()
            }

实现方法2

利用透明度实现

<div class="box">
        <ul>
            <li class="on">
                <img src="../images/1.jpg" alt="">
            </li>
            <li>
                <img src="../images/2.jpg" alt="">
            </li>
            <li>
                <img src="../images/3.jpg" alt="">
            </li>
            <li>
                <img src="../images/4.jpg" alt="">
            </li>
        </ul>
        <p id="prev"></p>
        <p id="next"></p>
        <ol>
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

* {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .box {
            width: 400px;
            height: 300px;
            margin: 40px auto;
            position: relative;
            /* overflow: hidden; */
            background-color: #ddd;
        }
        img{
            width: 400px;
            height: 300px;
        }

        .box ul li {
            width: 400px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 40px;
            font-weight: bold;
            border: 1px solid #000;
            position: absolute;
            top: 0;

            opacity: 0;
            transition: 1s;
        }
        .box ul .on{
            opacity: 1;
        }

        .box ol {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
        }

        .box ol li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #f00;
            margin: 10px;
            transition: 1s;
        }

        .on {
            background-color: #f00;
        }

        p{
            position: absolute;
            width: 30px;
            height: 30px;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: pink;
        }
        #prev{
            left: 0;
        }
        #next{
            right: 0;
        }

var t , index = 0;
        var oUlLis = document.querySelectorAll('ul li');
        console.log(oUlLis)
        var oOlLis = document.querySelectorAll('ol li');
        var oBox = document.querySelector('.box');
        var oUl = document.querySelector('ul');
        var flag ;

        autoplay() ;

        oBox.onmouseover = function() {
            clearInterval(t)
        }
        oBox.onmouseout = function() {
            autoplay()
        }

        next.onclick = function(){
            console.log(index)
            oUlLis[index].addEventListener('webkitTransitionEnd' , function(){
                flag = true;
                console.log(1)
            })
            if(flag) {
                clearInterval(t);
            
                index++ ;
                if(index == oUlLis.length) {
                    index = 0
                }
                showOne()
                autoplay()
            }
        }

        function autoplay() {
            t = setInterval(() => {
                index++ ;
                if(index == oUlLis.length) {
                    index = 0
                }
                showOne()
            },2000)
        }

        function showOne() {
            oUlLis.forEach(function(val , i){
                val.classList.remove('on');
                oOlLis[i].classList.remove('on');
            })
            oUlLis[index].classList.add('on');
            oOlLis[index].classL