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

最新推荐文章于 2023-02-11 11:28:40 发布
最新推荐文章于 2023-02-11 11:28:40 发布
阅读量979 收藏 3
点赞数 1
分类专栏： JavaScript案例 文章标签： 组合模式 elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
    评论
专栏目录
用Vue框架实现一个tab栏，切换不同的图片。
2301_79099480的博客
04-18 925
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
09-24
本文给大家分享一个demo基于HTML5+CSS3 实现灵动的动画 TAB 切换效果，非常不错，具有参考借鉴价值，需要的朋友参考下吧
tab栏切换的实现
zhaoyifei01的博客
02-11 3660
tab栏切换
总结tab栏切换实现的方法，以及增加滚动实现tab栏切换的效果
HQ\(^o^)/的博客
11-25 2619
继昨天写了篇简单的tab栏切换，后来，我又想起，其实这个tab栏切换，可以换为两部分，第一部分就是上面的 鼠标的高亮效果，第二部分就是 在第一部分的基础上进行操作的，第二部分也算是写死不动的。
swiper tab切换 实现左右tab切换和滚动
joy1793的博客
12-12 3102
swiper左右滚动
vue之tab栏切换
小多的博客
08-08 6962
一个简单的tab栏切换组件，由tabs以及tab-pane组成。
又一款强大的竖向tab切换焦点图效果
06-09
实现竖向tab切换焦点图效果，主要涉及以下技术点： 1. HTML结构：构建基础的HTML元素，包括tab按钮和内容容器。每个tab按钮对应一个内容区域，使用`<div>`或者其他合适的标签来组织。 2. CSS样式：通过CSS控制tab...
js+css实现tab菜单切换效果的方法
10-24
主要介绍了js+css实现tab菜单切换效果的方法,以实例形式完整讲述了css与js的实现代码,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
纯CSS实现导航栏Tab切换效果
09-27
CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
swiper.js tab中嵌套不同的轮播图
08-20
在jquery中使用swiper轮播图，我的博客中tab中显示嵌套的轮播图，tab中嵌套不同的轮播图，这是一个swiper.js代码文件
js实现tab切换效果
10-20
本文主要分享了js封装一个tab切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
JS、CSS实现轮播图
ds0604的博客
01-12 1274
js、css实现简单样式轮播图
html实现tab页及切换
热门推荐
tao111369的博客
11-22 4万+
效果图如下： tab切换通过js和jquery实现，代码如下（主要是调css样式比较麻烦，其他的都比较简单）： 1、页面切换通过js实现（有点繁琐，每个tab都要写一个onclick方法）： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo...
用四种不同的方法实现 tab栏切换
q2211164的博客
05-27 1049
基础片段 <!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"> <titl
tab切换及样式效果展现
chen271453865的博客
04-23 4236
页面结构 &lt;div class="tab"&gt; &lt;div class="tabDiv"&gt;&lt;a href="javascript:void(0)" class="active"&gt;未使用&lt;/a&gt;&lt;/div&gt; &lt;div class="tabDi
【Emacs】之 Org-mode
fanfan4569的博客
01-23 1万+
Org-mode Emacs最新版本（24.4）自带org-mode，这就意味着只要打开一个后缀名为org的文件就会自动进入org-mode。 （1）列提纲 * 为一级标题 ** 为二级标题 *** 为三级标题并以此类推 tab键 对标题进行展开和关闭 C-c C-t 可以将一个条目转换成一个TODO事件（再按一次就变成 DONE） （2）插入代
下拉菜单效果和tab选项卡切换
u011927449的博客
05-26 965
//下拉菜单效果和tab选项卡切换。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type
html,js实现定时切换或者图片轮播效果。并且添加左右tab切换效果。
最新发布
05-31
好的，以下是一个简单的html和js实现轮播效果，并添加了左右tab切换的代码： HTML代码： ```html <div id="slider"> <img class="slide" src="image1.jpg"> <img class="slide" src="image2.jpg"> <img class="slide" src="image3.jpg"> <img class="slide" src="image4.jpg"> <img class="slide" src="image5.jpg"> </div> <div id="tabs"> <div class="tab active"></div> <div class="tab"></div> <div class="tab"></div> <div class="tab"></div> <div class="tab"></div> </div> ``` CSS代码： ```css #slider { width: 600px; height: 400px; overflow: hidden; position: relative; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } #tabs { margin-top: 10px; display: flex; justify-content: center; } .tab { width: 20px; height: 20px; border-radius: 50%; background-color: gray; margin: 0 5px; cursor: pointer; } .tab.active { background-color: black; } ``` JS代码： ```javascript var slides = document.querySelectorAll('.slide'); var tabs = document.querySelectorAll('.tab'); var current = 0; function reset() { for (var i = 0; i < slides.length; i++) { slides[i].classList.remove('active'); tabs[i].classList.remove('active'); } } function startSlide() { reset(); slides[0].classList.add('active'); tabs[0].classList.add('active'); } function slideLeft() { reset(); current--; if (current < 0) { current = slides.length - 1; } slides[current].classList.add('active'); tabs[current].classList.add('active'); } function slideRight() { reset(); current++; if (current > slides.length - 1) { current = 0; } slides[current].classList.add('active'); tabs[current].classList.add('active'); } tabs.forEach(function(tab, index) { tab.addEventListener('click', function() { reset(); current = index; slides[current].classList.add('active'); tabs[current].classList.add('active'); }); }); startSlide(); setInterval(function() { slideRight(); }, 5000); ``` 解释一下代码： 1. HTML代码中，我们使用`<div>`来包含轮播图，使用`<img>`来展示每张图片。同时，我们使用一个`<div>`来包含tab标签，通过CSS实现tab标签样式，并使用JS来实现tab的切换效果。 2. CSS代码中，我们设置`#slider`的宽高、overflow属性为隐藏，并将每张图片的position属性设置为绝对定位，使它们可以重叠在一起，然后使用opacity和transition属性让它们可以淡入淡出切换。 3. JS代码中，我们使用`querySelectorAll()`方法获取轮播图和tab标签，然后定义了一些函数，如`reset()`函数用于重置轮播图和tab标签的状态，`startSlide()`函数用于开始轮播，`slideLeft()`和`slideRight()`函数用于左右切换。我们通过循环遍历tab标签，并使用`addEventListener()`方法监听tab标签的点击事件，然后调用`reset()`函数和设置轮播图和tab标签的`active`类来实现tab的切换效果。最后，我们使用`setInterval()`方法来设置定时器，使轮播图可以自动切换。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值