HTML基础-09 jQuery 点击小图标，大图切换照片

最新推荐文章于 2024-06-18 15:24:37 发布

V_zcm

最新推荐文章于 2024-06-18 15:24:37 发布

阅读量627

点赞数

分类专栏： HTML 文章标签： jquery html 前端

本文链接：https://blog.csdn.net/m0_59214979/article/details/121019024

版权

HTML 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本节：点击小图标，大图切换照片

开头引入jQuery

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

1.div：子绝父相，小圆标位置控制在图片里面；图片，都要先显示，用方法调用

2.script，jQuery 点击事件

最后，完整代码

<!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">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <!-- 引入jQuery -->
    <title>Document</title>
</head>

<body>

    <style>
        .btn {
            /* 定义圆形 */
            width: 20px;
            height: 20px;
            background-color: #FFF;
            text-align: center;
            /*文本居中*/
            line-height: 20px;
            /* 上下居中，行高等于高度 */
            border-radius: 50%;
            /*  border-radius: 50%;定义为圆形 */
            cursor: pointer;
            /* 鼠标上去会变手指 */
        }

        .btn:hover {
            /* 修改效果，一放上去就变背景颜色 */
            background-color: wheat;
            color:white;

        }

        .btngroups {
            /* 定义圆形格式不换行和定位 */
            display: flex;
            position: absolute;
         
            right: 20px;
            bottom: 20px;
        }
    </style>
    
    <div style="position: relative;height: 250px;width: 300px;">
        <!-- 父相对 -->

        <img id="img" src="./7.jpg" style="width: 100%;height: 100%;" />

        <div class="btngroups" style=" position: absolute;">  
             <!-- 子绝对 -->
            <div imgurl="./7.jpg" class="btn">1</div>
            <!-- imgurl只是一个变量 -->
            <div imgurl="./9.jpg" class="btn">2</div>
            <div imgurl="./12.jpg" class="btn">3</div>
            <div imgurl="./8.jpg" class="btn">4</div>
        </div>
    </div>

    <!-- <script>
        $(function () {
            $(".btn").mouseenter(function () {
                let abc = $(this).attr("imgurl")
                $("#img").attr("src", abc)//attr改变里面的内容，第一个改变的属性，第二个改变的内容
            })
        })
    </script> -->
    <script>
        $(function () {
                $(".btn").click(function () {
                    // this相当于指针，会根据鼠标自动跳
                    $("#img").attr("src",$(this).attr("imgurl"));
                    // attr  
                   
            })
        })
    </script>

</body>

</html>