js动画----轮播图

最新推荐文章于 2022-12-02 20:44:55 发布

A &......

最新推荐文章于 2022-12-02 20:44:55 发布

阅读量181

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/m0_47531829/article/details/117341898

版权

本文探讨了三种不同的HTML5轮播图实现方式，通过CSS和JavaScript结合，实现图片无缝滚动效果。每种方法都涉及定时器控制轮播速度、图片切换及停止功能。其中，代码着重处理了轮播到最后一张后返回第一张的平滑过渡问题，避免了短暂间隔和精度问题。

摘要由CSDN通过智能技术生成

第一种方法：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .out1 {
            margin: auto;
            width: 500px;
            height: 400px;
        }
        
        .out2 {
            overflow: hidden;
        }
        
        .inner {
            width: 2500px;
            height: 400px;
        }
        
        img {
            float: left;
            width: 500px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="out1">
        <div class="out2">
            <div class="inner">
                <img src="images/01.jpg" alt="">
                <img src="images/02.jpg" alt="">
                <img src="images/03.jpg" alt="">
                <img src="images/04.jpg" alt="">
                <img src="images/01.jpg" alt="">
            </div>
        </div>
    </div>
    <button>停止</button>
    <script>
        var out2 = document.querySelector('.out2');
        var btn = document.querySelector('button');
        // var inner = document.querySelector('.inner')
        var img = document.querySelector('img');
        console.log(img.width);
        // var step = img.width / 5 / 10;
        var step = 50;
        var num = 0
        var timer1
        console.log(step);

        function autoScroll() {
            timer1 = setInterval(function() {
                console.log(num);
                console.log(out2.scrollLeft);
                //在最后面加入一个图片的时候，会导致下一次第一张和第二张轮播的时候，有个短暂的间隔，
                // 调试的时候发现，短暂的时间间隔是因为在调用autoScroll的时候，当num==5，赋值num=0，导致的
                // 这样就出现了两次out2.scrollLeft = 0 的情况，
                if (num == 0) {
                    num = 1
                }
                if (out2.scrollLeft == 500 * num) {
                    clearInterval(timer1)
                } else {
                    out2.scrollLeft += step
                }
            }, 100)

        }

        window.onload = function() {
            var timer2 = setInterval(function() {
                num++
                autoScroll()
                if (num == 5) {
                    // autoScroll()
                    num = 0
                    out2.scrollLeft = 0
                }
            }, 2000)
            btn.addEventListener('click', function() {
                clearInterval(timer2)
            })
        }
        btn.addEventListener('click', function() {
            clearInterval(timer1)
                // clearInterval(timer2)
        })
    </script>
</body>

</html>

第二种方法：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .out1 {
            margin: auto;
            width: 500px;
            height: 400px;
        }
        
        .out2 {
            overflow: hidden;
        }
        
        .inner {
            width: 2500px;
            height: 400px;
        }
        
        img {
            float: left;
            width: 500px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="out1">
        <div class="out2">
            <div class="inner">
                <img src="images/01.jpg" alt="">
                <img src="images/02.jpg" alt="">
                <img src="images/03.jpg" alt="">
                <img src="images/04.jpg" alt="">
                <img src="images/01.jpg" alt="">
            </div>
        </div>
    </div>
    <button>停止</button>
    <script>
        var out2 = document.querySelector('.out2');
        var inner = document.querySelector('.inner');
        var btn = document.querySelector('button');
        var step = 50; //设置步长，不能写死，有精确度问题
        var num = 0; //记录轮播图到达哪个图片
        function autoScroll() { //控制轮播的函数，每隔一段时间调用，调用的时候，计时器才有作用，才有轮播的效果
            var timer1 = setInterval(function() {
                out2.scrollLeft += step; //步长，使轮播图有缓慢滑动的效果
                if (out2.scrollLeft == num * 500) { //每切换一张图片，就清除一下定时器。注意当达到条件的时候，这里设置的第一个定时器timer1已经清除，
                    clearInterval(timer1) //也就是timer1已经不起作用了，只有当第二个定时器调用autoScroll时,才能继续使用timr1,在这里每隔1秒，就清除定时器，
                } //而第二个定时器每隔2s执行，剩余1s定时器timer1不起作用，停留一下
                console.log(num);
                console.log(out2.scrollLeft);
                btn.addEventListener('click', function() {
                    clearInterval(timer1)
                })
            }, 100)
        }

        window.onload = function() {
            //每切换一幅图片，就等待一段时间，而等待的这段时间，是靠第二个定时器控制的
            var timer2 = setInterval(function() {
                num++ //记录轮播图到达哪个图片
                if (num == 5) { //num=4时，说明已经到达第二轮的第一张图片了，需要将第二轮第一张图片停留一段时间，才能继续执行
                    num = 1; //num=5，轮播将要达到第二轮第二张，而当到达第二轮的第二张的时候，此时让num=1，让timer1在第二张轮播结束时，清除计时器tiner1,设置num1的原因，同时也清楚了第二轮的第一张和第二张的短暂的时间间隔
                    out2.scrollLeft = 0
                }
                autoScroll();
                btn.addEventListener('click', function() {
                    clearInterval(timer2)
                })
            }, 2000)
        }
    </script>
</body>

第三种方法：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .out1 {
            margin: auto;
            width: 500px;
            height: 400px;
        }
        
        .out2 {
            overflow: hidden;
        }
        
        .inner {
            width: 2500px;
            height: 400px;
        }
        
        img {
            float: left;
            width: 500px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="out1">
        <div class="out2">
            <div class="inner">
                <img src="images/01.jpg" alt="">
                <img src="images/02.jpg" alt="">
                <img src="images/03.jpg" alt="">
                <img src="images/04.jpg" alt="">
                <img src="images/01.jpg" alt="">
            </div>
        </div>
    </div>
    <button>停止</button>
    <script>
        var out2 = document.querySelector('.out2');
        var inner = document.querySelector('.inner');
        var btn = document.querySelector('button');
        var step = 50;
        var num = 0;

        function autoScroll() {
            var timer1 = setInterval(function() {
                out2.scrollLeft += step;
                if (out2.scrollLeft == num * 500) {
                    clearInterval(timer1)
                }
                if (num == 5) {
                    num = 1;
                    out2.scrollLeft = 0
                }
                console.log(num);
                console.log(out2.scrollLeft);
                btn.addEventListener('click', function() {
                    clearInterval(timer1)
                })
            }, 100)
        }

        window.onload = function() {
            var timer2 = setInterval(function() {
                num++
                autoScroll();
                btn.addEventListener('click', function() {
                    clearInterval(timer2)
                })
            }, 2000)
        }
    </script>
</body>

</html>

成品2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: relative;
        width: 500px;
        height: 400px;
        border: 1px solid red;
        margin: auto;
    }
    
    .out {
        overflow: hidden;
        position: relative;
    }
    
    .inner {
        width: 2500px;
    }
    
    img {
        width: 500px;
        height: 400px;
        display: block;
        float: left;
    }
    
    .previous,
    .next {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: wheat;
        line-height: 40px;
        text-align: center;
        top: 180px;
    }
    
    .next {
        right: 0;
    }
    
    dl {
        position: absolute;
        bottom: 10px;
    }
    
    dt {
        float: left;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid red;
        cursor: pointer;
    }
    
    .current {
        background-color: red;
    }
</style>

<body>
    <div class="box">
        <div class="out">
            <div class="inner">
                <img src="./images/01.jpg" alt="">
                <img src="./images/02.jpg" alt="">
                <img src="./images/03.jpg" alt="">
                <img src="./images/04.jpg" alt="">
                <img src="./images/01.jpg" alt="">
            </div>
        </div>
        <div class="previous">&lt</div>
        <div class="next">&gt</div>
        <dl>
            <dt class="current">1</dt>
            <dt>2</dt>
            <dt>3</dt>
            <dt>4</dt>
        </dl>
    </div>
    <button>停止</button>
</body>
<script>
    var out = document.querySelector('.out');
    var img = document.querySelector('.inner').querySelectorAll('img');
    var btn = document.querySelector('button');
    var previous = document.querySelector('.previous');
    var next = document.querySelector('.next');
    var dtList = document.querySelector('dl').querySelectorAll('dt');
    var num = 0;
    var startStep
    delayTime();
    //开始轮播
    function move(start, end) {
        startStep = 0;
        var endStep = 10;
        var speed = (end - start) / endStep;
        timer1 = setInterval(function() {
            startStep++
            console.log('startStep' + startStep);
            out.scrollLeft = Math.ceil(out.scrollLeft) //通过打印out.scrollLeft可知，每过1ms，误差就增加一些长度，导致最后轮播图中每个图片都会多走一些长度，
                // 把out.scrollLeft向上取整，就会每个1ms，让误差在1个单位之内
            out.scrollLeft += speed;
            if (startStep == endStep) {
                clearInterval(timer1)
            }
        }, 100)
    }

    function autoFn() {
        num++
        if (num == img.length) {
            num = 1;
            out.scrollLeft = 0;
        }
        move(out.scrollLeft, out.clientWidth * num)
        changeColor()
    }

    function delayTime() {
        timer2 = setInterval(autoFn, 2000)
        btn.addEventListener('click', function() {
            clearInterval(timer2)
        })
    }
    next.addEventListener('click', function() {
            //判断当轮播图中的图片没有走完时，停止定时器，完成需要走的距离
            if (startStep != 10) {
                clearInterval(timer2);
            } else {
                clearInterval(timer2);
                autoFn();
                delayTime();
            }

            // autoFn();
            console.log("step" + startStep);
            console.log('out.scrollLeft' + out.scrollLeft);

        })
        //轮播图向左点击
    previous.addEventListener('click', function() {
            num--;
            if (startStep != 10) {
                clearInterval(timer2);
            } else {
                clearInterval(timer2);
                if (num < 0) {
                    num = 3;
                    out.scrollLeft = out.clientWidth * num
                }
                move(out.scrollLeft, out.clientWidth * num)
                delayTime();
                console.log(num);
            }


        })
        //最下方四个下标
    for (let i = 0; i < dtList.length; i++) {
        dtList[i].onclick = function() {
            for (var j = 0; j < dtList.length; j++) {
                dtList[j].className = ''
            }
            this.className = 'current'
            clearInterval(timer2)
            num = i;
            console.log(num);
            move(out.scrollLeft, out.clientWidth * num)
        }
    }

    function changeColor() {
        for (var i = 0; i < img.length - 1; i++) {
            dtList[i].className = '';
        }
        var j = num;
        if (j == img.length - 1) {
            j = 0
        }
        dtList[j].className = 'current'
            // console.log(j);
    }
</script>

</html>