纯js轮播图

wxlwxlwxls

已于 2022-07-20 16:37:09 修改

阅读量162

点赞数 2

文章标签： javascript 前端 html

于 2022-07-19 22:30:59 首次发布

本文链接：https://blog.csdn.net/wxlwxlwxls/article/details/125882131

版权

本文介绍了如何使用JavaScript创建一个图片轮播图，包括封装的动画函数animate()，HTML和CSS布局，以及轮播图的JavaScript代码实现，如鼠标悬停暂停、离开继续轮播、点击小圆点切换图片等功能。同时，文章还展示了轮播图的最终效果。

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

1.我们要知道js如何让图片动起来

这里我们封装了一个让图片动起来的函数；使用时候可以随时调用

function animate (obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;  //可以使图片运动跟丝滑：距离目标位置越近，速度越慢
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // if (callback) {
            //     callback();
            // }
            //下面代码与上面相同,如果存在callback函数，则执行callback();
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15)
}

obj指需要运动的对象，target指我们希望该对象运动后的位置，callback指回调函数（等图片运动完之后如果还想让对象让上什么效果的话，就写在这个回调函数里面，下面控制图片的节流阀就使用到回调函数）

2.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>
    <script src="animate.js"></script>  //导入两个js文件
    <script src="index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .imge li {
            list-style: none;
            float: left;
        }

        img {
            width: 500px;

        }

        .content {
            width: 500px;
            height: 280px;
            border: 5px solid aqua;
            border-radius: 10px;
            background-color: aqua;
            position: relative;
            margin-left: 300px;
            overflow: hidden;

        }

        .imge {
            width: 400%;
            position: absolute;
        }

        .point {
            position: absolute;
            width: 100px;
            height: 30px;
            left: 50%;
            transform: translate(-50%, 0);
            top: 85%;
        }

        span {
            display: inline-block;
            height: 20px;
            width: 20px;
            background-color: pink;
            margin-left: 5px;
            border-radius: 10px;
            opacity: 70%;
        }

        .select {
            background-color: blue;
        }

        .toleft {
            height: 20px;
            width: 20px;
            border-radius: 10px;
            background-color: blueviolet;
            opacity: 80%;
            position: absolute;
            left: 20px;
            top: 50%;
        } 

        .toright {
            height: 20px;
            width: 20px;
            border-radius: 10px;
            background-color: blueviolet;
            opacity: 80%;
            position: absolute;
            left: 93%;
            top: 50%;
        }

        .pointer {
            display: none;
            z-index: 4;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="content">
        <ul class="imge">
            <li><a href="#"><img src="image1.jpg" alt=""></a></li>
            <li><a href="#"><img src="image2.jpg" alt=""></a></li>
            <li><a href="#"><img src="image3.png" alt=""></a></li>
            <li><a href="#"><img src="image1.jpg" alt=""></a></li>
        </ul>
        <div class="point">
            <span class="select"></span><span></span><span></span>
        </div>
        <div class="pointer">
            <div class="toleft">
                <a href="javascript:;"> < </a>
            </div>
            <div class="toright"> 
                <a href="javascript:;"> > </a> 
            </div>
        </div>



    </div>

</body>

</html>

如果我们把外面大盒子的overflow: hidden;注释起来，会出现下图样式

这样我们的html跟css格式就写好了

3.轮播图js代码

window.addEventListener('load', function () {
    var content = this.document.querySelector('.content');
    var imge = this.document.querySelector('.imge');
    var pointer = this.document.querySelector('.pointer');
    var pointLeft = this.document.querySelector('.toleft');
    var pointRight = this.document.querySelector('.toright');
    var point = this.document.querySelector('.point');
    var span = point.querySelectorAll('span');
    var images = this.document.querySelector('img');
    //鼠标移动到图片上显示向左向右按键
    content.addEventListener('mouseenter', function () {
        pointer.style.display = 'block';
        //鼠标经过时停止自动轮播
        clearInterval(timer);
        timer = null;//清除自动轮播变量
    })
    //当鼠标移开，又开始自动轮播
    content.addEventListener('mouseleave', function () {
        pointer.style.display = 'none';
        timer = setInterval(function () {
            pointRight.click();
        }, 2000);
    });
    //给图片底部的小圆圈设置自定义属性
    for (var i = 0; i < span.length; i++) {
        span[i].setAttribute('index', i);
    }
    span[0].className = 'select';
    //给图片底部小圆圈绑定点击事件
    for (var i = 0; i < span.length; i++) {
        span[i].addEventListener('click', function () {
            for (var i = 0; i < span.length; i++) {
                span[i].className = '';
            }
            this.className = 'select';
            var index = this.getAttribute('index');
            //点击小圆圈移动图片
            var imageWidth = images.offsetWidth;
            animate(imge, -index * imageWidth);
            //当点击圆圈是需要把circle值也改变
            num = Number(index);
            if (num == 3) {
                num = 0;
            }
            circle = num;
        })
    }
    //点击右侧按钮，图片滚动一张
    var imageWidth = images.offsetWidth;
    var num = 0;
    //添加节流阀,每一张图片动画结束后再运动下一个动画
    var flag = true;
    //circle控制小圆圈的播放
    var circle = 0;
    pointRight.addEventListener('click', function () {
        //控制节流阀
        if (flag) {
            flag = false;
            num++;
            //当向右移动到最后一张图片时，返回第一张图片，此做法需要在图片组的最后加入第一张图片，然后直接转到第二张图
            if (num == 4) {
                imge.style.left = 0;
                num = 1;
            }
            animate(imge, -(num) * imageWidth, function () {
                flag = true;
            });
            //circle控制小圆圈的播放    
            circle++;
            for (var i = 0; i < span.length; i++) {
                span[i].className = '';
            }
            if (circle == 3) {
                circle = 0;
            }
            span[(circle)].className = 'select';
        }

    })

    //左侧
    pointLeft.addEventListener('click', function () {
        //当向右移动到最后一张图片时，返回第一张图片，此做法需要在图片组的最后加入第一张图片，然后直接转到第二张图
        if (flag) {
            flag = false;
            if (num == 0) {
                imge.style.left = -1500 + 'px';
                num = 3;
            }
            num--;
            animate(imge, num * -imageWidth, function () {
                flag = true;
            });
            //circle控制小圆圈的播放    
            for (var i = 0; i < span.length; i++) {
                span[i].className = '';
            }
            if (circle == 0) {
                circle = 3;
            }
            circle--;
            span[circle].className = 'select';
        }
    })
    // 自动播放轮播图
    var timer = this.setInterval(function () {
        pointRight.click();
    }, 2000);
})

这样，我们的轮播图就大功告成了，最后把大盒子注释掉的overflow: hidden;解除，让我们来一起看下效果

轮播图动画展示

wxlwxlwxls

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯js轮播图

obj指需要运动的对象，target指我们希望该对象运动后的位置，callback指回调函数（等图片运动完之后如果还想让对象让上什么效果的话，就写在这个回调函数里面，下面控制图片的节流阀就使用到回调函数）这样，我们的轮播图就大功告成了，最后把大盒子注释掉的overflowhidden;解除，让我们来一起看下效果。如果我们把外面大盒子的overflowhidden;注释起来，会出现下图样式。这里我们封装了一个让图片动起来的函数；使用时候可以随时调用。这样我们的html跟css格式就写好了。......
复制链接

扫一扫