JS练习-轮播图

最新推荐文章于 2024-08-13 16:15:07 发布

幼儿园小班在读生

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量97

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_59946059/article/details/126215169

版权

本文详细介绍了如何使用HTML5和CSS实现一个具备自动播放、鼠标交互、左右按钮控制及小圆点导航功能的轮播图组件。通过缓动动画函数实现平滑过渡，同时讲解了无缝滑动、点击小圆点切换图片以及鼠标悬停暂停播放等关键功能的实现方法。

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

1.实现功能：

1）轮播图自动播放

2）鼠标移入图片，停止播放；鼠标移出，继续播放

3）点击左按钮，向左播放；点击右按钮，向右播放

4）点击小圆圈，播放相应图片

5）小圆圈跟随图片播放而变化

2.实现过程

1.html+css

<!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>
    * {
        margin: 0;
        padding: 0;
    }

    .bigImgBox {
        height: 200px;
        width: 300px;
        position: relative;
        margin: 20px;
        overflow: hidden;
    }

    .bigImgBox a {
        position: absolute;
        color: #000;
        background-color: #ccc;
        height: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        top: 80px;
        opacity: 0.5;
        z-index: 100;
    }

    .bigImgBox #left {
        left: 10px;
    }

    .bigImgBox #right {
        right: 10px;
    }

    .bigImgBox ul {
        width: 1800px;
        position: absolute;
        height: 200px;
        top: 0;
        left: 0;
    }

    .navImg {
        height: 200px;
        width: 300px;
        float: left;
        list-style: none;
    }

    .navImg img {
        height: 100%;
        width: 100%;
    }

    .bigImgBox ol {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }

    .bigImgBox ol li {
        float: left;
        margin-left: 5px;
        list-style: none;
        height: 10px;
        width: 10px;
        border-radius: 10px;
        z-index: 100;
        border: 1px solid #fff;
    }

    .circle {
        background-color: #fff;
        opacity: 0.7;
    }
</style>

<body>
    <div class="bigImgBox">
        <a href="javascript:;" id="left">&lt</a>
        <a href="javascript:;" id="right">&gt</a>
        <ul>
            <li class="navImg"><img src="images/1.jpg" alt=""></li>
            <li class="navImg"><img src="images/2.jpg" alt=""></li>
            <li class="navImg"><img src="images/3.jpg" alt=""></li>
            <li class="navImg"><img src="images/4.jpg" alt=""></li>
        </ul>
        <ol>
        </ol>
    </div>
</body>

</html>

1.缓动画函数

function move(obj, place, fun) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        //缓步动画公式：（目标值 - 现在的位置）/10
        var tem = (place - obj.offsetLeft) / 10;
        //三元运算符判断：tem>0时向上取整；tem<0时向下取整
        tem = tem > 0 ? Math.ceil(tem) : Math.floor(tem);
        if (obj.offsetLeft === place) {
            clearInterval(obj.timer);
            if (fun) {//回调函数
                fun();
            }
        }
        obj.style.left = obj.offsetLeft + tem + 'px';

    }, 50);
};

2.小圆圈点击轮播

var ul = document.querySelector('ul');//图片
var ol = document.querySelector('ol');//小圆圈
var bigImgBox = document.querySelector('.bigImgBox');
var width = bigImgBox.offsetWidth;
/*
 1.小圆圈应与图片数一致，获取li的长度循环动态生成小圆圈；

 2.点击小圆圈，让图片滚动
*/
// 根据图片的个数生成小圆圈的个数
for (let i = 0; i < ul.children.length; i++) {
    var li = document.createElement('li');
    li.setAttribute('data-index', i);//生成节点
    ol.appendChild(li);//添加小圆圈
    ol.children[0].className = 'circle';

    li.addEventListener('click', function () {//点击小圆圈触发事件，实现点击小圆圈滑动
        var index = this.getAttribute('data-index');//自定义data-index属性，赋值为该li的索引号
        for (let j = 0; j < ol.children.length; j++) {//排他思想
            ol.children[j].className = ' ';

        }
        this.className = 'circle';
        //调用换动画函数
        move(ul, -index * width);//移动距离为图片*li的索引号

        //更新图片张数和小圆圈
        tem = index;
        count = index;


    })
};

3.无缝滑动

        /*当点击滑动到最后一张时，再次向右点击时，能够使图片无缝滑动到第一张*/
        var copyImg = ul.children[0].cloneNode(true);//深拷贝
        ul.appendChild(copyImg);

4.点击按钮滑动

var tem = 0;//统计当前第几张图片
var flag = true;//节流阀开关 ；使动画执行完后才能执行下一个动画     
right.addEventListener('click', function () {//点击右按钮触发事件
    if (flag) {
        flag = false;
        if (tem >= ul.children.length - 1) {//如果当前图片为最后一张，图片跳转为第一张
            tem = 0;
            ul.style.left = 0;
        }
        tem++;
        move(ul, -tem * width, function () {
            flag = true;
        });
    }
});

5.自动轮播

        var timer = setInterval(function () {
            right.click();
        }, 4000);
        bigImgBox.addEventListener('mouseover', function () {
            clearInterval(timer);
        });
        bigImgBox.addEventListener('mouseout', function () {
            timer = setInterval(function () {
                right.click();
            }, 4000);
        });

6.小圆圈跟随图片变化

        /*判断当前图片，使最后一张和第一张与小圆圈对应*/
        function circleMove(i) {
            if (i < 0) {
                return ul.children.length - 2;
            } else if (i >= ul.children.length - 1) {
                return 0;
            } else {
                return i;
            }
        }

                count = circleMove(count);
                for (let i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = ' ';

                };
                ol.children[count].className = 'circle';
                move(ul, -tem * width, function () {
                    flag = true;
                });