组合模式实现tab切换、轮播图、放大镜效果

最新推荐文章于 2022-10-31 17:47:40 发布

VIP文章 HAI6545

最新推荐文章于 2022-10-31 17:47:40 发布

阅读量955

点赞数 1

分类专栏： JavaScript案例文章标签：组合模式 elementui vue.js

本文链接：https://blog.csdn.net/HAI6545/article/details/122625128

版权


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/14-组合模式.css">
</head>
<body>
    <!-- tab切换开始 -->
    <div class="tab">
        <ul>
            <li class="active">向日葵</li>
            <li>郁金香</li>
            <li>红玫瑰</li>
        </ul>
        <ol>
            <li class="active">
                <a href="./images/1.jfif">
                    <img src="./images/1.jfif" alt="">
                </a>
            </li>
            <li>
                <a href="./images/2.webp">
                    <img src="./images/2.webp" alt="">
                </a>
            </li>
            <li>
                <a href="./images/3.jfif">
                    <img src="./images/3.jfif" alt="">
                </a>
            </li>
        </ol>
    </div>
    <!-- tab切换结束 -->

    <!-- 轮播图开始 -->
    <div class="carousel">
        <ul>
            <li class="active">
                <a href="">
                    <img src="./images/1.jfif" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/2.webp" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/3.jfif" alt="">
                </a>
            </li>
        </ul>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
        <span class="leftBtn">&lt;</span>
        <span class="rightBtn">&gt;</span>
    </div>
    <!-- 轮播图结束 -->

    <!-- 放大镜开始 -->
    <div class="enlarge">
        <div class="middle">
            <img src="./images/1.jfif" alt="">
            <div class="mask"></div&g

最低0.47元/天解锁文章

HAI6545

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
组合模式实现tab切换、轮播图、放大镜效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./css/14-组合模式.css"></head><body>  <di..
复制链接

扫一扫