自定义轮播图组件

最新推荐文章于 2023-06-23 08:38:22 发布

一只金牛座的崽

最新推荐文章于 2023-06-23 08:38:22 发布

阅读量223

点赞数 1

分类专栏：自定义组件文章标签： javascript jquery css html es6

本文链接：https://blog.csdn.net/weixin_43456275/article/details/105418430

版权

自定义组件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

运用jquery写一个轮播图组件，实现过程中使用ES6一些写法和考虑了一些优化，如果以后有新的知识会继续更新这个轮播图的功能。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
* {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 300px;
            height: 212px;
            margin: auto;
            border: 1px solid grey;
            overflow: hidden;
        }

        .state {
            width: 300px;
            height: 33px;
            margin: auto;
            border-radius: 0px 0px 8px 8px;
        }

        ul {
            display: flex;
        }

        ul li {
            list-style: none;
        }

        ul img {
            width: 300px;
            height: 212px;
            object-fit: cover;
        }

        .bannerstate {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bannerstate li {
            width: 30px;
            height: 30px;
            border: 1px solid grey;
            border-radius: 50%;
            cursor: pointer;
        }

        .stateli {
            background: skyblue
        }
    </style>
</head>

<body>
    <div>
        <ul class="bannerimg">
            <li>
                <img src="./imgs/1.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/2.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/3.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/4.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/1.jpg" alt="">
            </li>
        </ul>
    </div>
    <div class="state">
        <ul class="bannerstate">

        </ul>
    </div>
    <script src="./js/common.js"></script>
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script>
        var offset = 0;
        var firstimg = 0;//初始化下面的点的 索引
        var banner;
        //获取轮播下方的点
        function getBannerState() {
            var html = ''; //先定义一个变量  储存所有循环的结果  在最后在复制到DOM上 一种优化性能的方式
            for (let i = 0; i < 4; i++) {
                //采用es6模板字符串 更加方便 
                if (i == 0) {
                    html += `<li index="${i}" class="stateli"></li>       `
                } else {
                    html += `<li index="${i}"></li> `
                }
            }
            $('.bannerstate').append(html)
        }
        //轮播方法
        function Banner() {
            banner = setInterval(() => {
                offset += -300;
                firstimg += 1;
                if (offset <= -1200) {
                    offset = 0;
                    firstimg = 0
                }
                $('.bannerstate li').eq(firstimg).siblings().removeClass('stateli')
                $('.bannerstate li').eq(firstimg).addClass('stateli')
                $('.bannerimg').css({ "margin-left": offset })
            }, 1000);
        }

        getBannerState();
        Banner();
        //鼠标移动到小点停止轮播
        $('.bannerstate li').hover(function () {
            clearInterval(banner)
        }, function () {
            Banner();
        });
        //点击小点切换
        $('.bannerstate li').on('click', function () {
            firstimg = Number($(this).attr('index')); //获取的自定义的属性的值是字符串类型的  需要转成数字类型的
            offset = $(this).attr('index') * (-300)
            $('.bannerstate li').eq(firstimg).siblings().removeClass('stateli');
            $('.bannerstate li').eq(firstimg).addClass('stateli');
            $('.bannerimg').css({ "margin-left": offset })
        })
    </script>
</body>
</html>

效果图：
在这里插入图片描述

一只金牛座的崽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义轮播图组件

运用jquery写一个轮播图组件，实现过程中使用ES6一些写法和考虑了一些优化，如果以后有新的知识会继续更新这个轮播图的功能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
复制链接

扫一扫

专栏目录