基于jq制作简单的轮播图（世界上最简易的轮播图！）

最新推荐文章于 2024-04-15 10:28:24 发布

我，小李！

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/zhixuejia/article/details/118861048

版权

轮播图在我们的生活中很常见，制作也分简单的和复杂的，下面列举一个简单的轮播图小案例

首先我们进行布局也就是先插入四张图片

li是我们的小圆点（跟随图片移动，可以点击圆点移动图片等）

<body>
    <div class="banner">
        <img src="../第二天/images/banner1.png" alt="" style="display: block;">
        <img src="../第二天/images/banner2.jpg" alt="">
        <img src="../第二天/images/banner3.jpg" alt="">
        <img src="../第二天/images/banner4.png" alt="">
    </div>
    <div id="curunt">
        <ul>
            <li class="curunt"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

然后安插css样式

        div {
            position: relative;
        }

        div img {
            position: absolute;
            top: 0;
            left: 0;
            width: 1900px;
            display: none;
        }

        ul {
            position: absolute;
            left: 875px;
            top: 530px;
        }

        li {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #fff;
            background: transparent;
        }

        .curunt {
            background-color: #fff;
        }
    </style>

然后进行js代码部分

首先分步

1.轮播图开始轮播（创建一个定时器利用index让第一张图片淡出下一张图片淡入如果index大于图片的总长度那么我们将index=0使轮播图重新开始轮播）

2.鼠标移入事件：

鼠标移入时我们使轮播图停止（直接将定时器清除），当鼠标移出时我们重新创建定时器（说白了就是把上面轮播图创建的代码复制一遍）

3.小圆点互动：

1.给小圆点绑定index图片淡入淡时随着图片添加curunt类（就是小圆点多了个背景色代表选中）

2.给小圆点绑定点击事件点击时使图片fadeIn他的兄弟全部淡出，然后同时给你点击的小圆点添加curunt类其他兄弟移出curunt类(排他思想)

     <script>
        let index = 0;
        let timer = null;
        $(function () {
            let index = 0;
            let timer = null;
            let cur_index = index;
            $(function () {
                //轮播图创建
                timer = setInterval(function () {
                    if (index >= $('.banner img').length) {
                        index = 0
                    }
                    $('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal');
                    $('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
                    index++
                }, 1300)
                //鼠标移入
                $('.banner').hover(function () {
                    clearInterval(timer)
                }, function () {//鼠标移出创建定时器
                    timer = setInterval(function () {
                        if (index >= $('.banner img').length) {
                            index = 0
                        }
                        $('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal')
                        $('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
                        index++
                    }, 1300)
                })
                //小圆点点击事件
                $('#curunt li').click(function () {
                    index = $(this).index();
                    $('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal')
                    $('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
                })
            })
        })
    </script>

全部代码奉上

<!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>
        div {
            position: relative;
        }

        div img {
            position: absolute;
            top: 0;
            left: 0;
            width: 1900px;
            display: none;
        }

        ul {
            position: absolute;
            left: 875px;
            top: 530px;
        }

        li {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #fff;
            background: transparent;
        }

        .curunt {
            background-color: #fff;
        }
    </style>
    <script src="../第二天/jquery.min.js"></script>
</head>

<body>
    <div class="banner">
        <img src="../第二天/images/banner1.png" alt="" style="display: block;">
        <img src="../第二天/images/banner2.jpg" alt="">
        <img src="../第二天/images/banner3.jpg" alt="">
        <img src="../第二天/images/banner4.png" alt="">
    </div>
    <div id="curunt">
        <ul>
            <li class="curunt"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        let index = 0;
        let timer = null;
        $(function () {
            let index = 0;
            let timer = null;
            let cur_index = index;
            $(function () {
                //轮播图创建
                timer = setInterval(function () {
                    if (index >= $('.banner img').length) {
                        index = 0
                    }
                    $('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal');
                    $('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
                    index++
                }, 1300)
                //鼠标移入
                $('.banner').hover(function () {
                    clearInterval(timer)
                }, function () {//鼠标移出创建定时器
                    timer = setInterval(function () {
                        if (index >= $('.banner img').length) {
                            index = 0
                        }
                        $('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal')
                        $('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
                        index++
                    }, 1300)
                })
                //小圆点点击事件
                $('#curunt li').click(function () {
                    index = $(this).index();
                    $('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal')
                    $('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
                })
            })
        })
    </script>
</body>

</html>

over!

我，小李！

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
基于jq制作简单的轮播图（世界上最简易的轮播图！）

轮播图在我们的生活中很常见，制作也分简单的和复杂的，下面列举一个简单的轮播图小案例首先我们进行布局也就是先插入四张图片 li是我们的小圆点（跟随图片移动，可以点击圆点移动图片等）<body> <div class="banner"> <img src="../第二天/images/banner1.png" alt="" style="display: block;"> <img src="../第二天/im...
复制链接

扫一扫