html+css+jquery实现轮播图自动切换、左右切换、点击切换

news2025/1/17 21:48:40

pc端也好、移动端也好，轮播图很常见，今天用html+css+jquery实现小米商城轮播图，套UI框架更容易实现

在这里插入图片描述

步骤1：把静态轮播图用div+css布局出来，采用盒子模型、相对绝对定位实现

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 460px;
            width: 1000px;
            position: relative;
        }

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 50px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="static/image/1.jpg"></div>
    <div class="box-img"><img src="static/image/2.jpg"></div>
    <div class="box-img"><img src="static/image/6.jpg"></div>
    <div class="box-img"><img src="static/image/4.jpg"></div>
    <div class="box-img"><img src="static/image/5.jpg"></div>
    <div class="box-img"><img src="static/image/3.jpg"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</body>
</html>

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

步骤2：实现轮播图自动切换

需要引入jquery；

<script src="static/js/jquery.min.js"></script>

定时器实现4s自动切换轮播图

<script>
    $(function () {
        var index = 0;
        setInterval(function () {
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            if ($(".box-img").length - 1 === index) {
                index = 0
            } else {
                index++;
            }
        }, 4000)
    })
</script>

.box-img {
    ...
    /* 设置属性是否透明，0是透明，1是不透明 */
    opacity: 0;
    /* 过渡效果，延迟1.5s */
    transition: 1.5s;
}

.box-img:nth-child(1) {
	/* 设置属性是否透明，0是透明，1是不透明，默认显示第一张轮播图 */
    opacity: 1;
}

完毕，轮播图能够自动切换了

步骤3：左右切换，左右点击事件手动切换

实现代码如下：

// 左右切换
$(".box-left").click(function () {
    // 点击左，index减1，减到最小时让成为最大
    if (index === 0) {
        index = $(".box-img").length - 1;
    } else {
        index--;
    }
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
});
$(".box-right").click(function () {
    // 点击右，index加1，加到最大时让成为最小
    if (index === $(".box-img").length - 1) {
        index = 0;
    } else {
        index++;
    }
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
});

到目前存在自动切换轮播图，也存在手动切换轮播图。就可能存在手动切换时，又自动切换，客户体验就不太好，可以优化成，手动切换轮播图时，自动切换轮播图关掉，手动切换完成后，又开启自动切换轮播图。

优化后，自动切换和左右切换js代码如下：

<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        function f() {
            var timer = setInterval(function () {
                $(".box-img").css("opacity", 0);
                $(".box-img").eq(index).css("opacity", 1);
                if ($(".box-img").length - 1 === index) {
                    index = 0
                } else {
                    index++;
                }
            }, 4000);
        }

        f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            f();
        });
    })
</script>

步骤4：点击切换，点击圆点事件手动切换

代码如下：

$(".btn").click(function () {
    clearInterval(timer);
    // 获取第几个圆点
    index = $(this).index()
    // alert(index)
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
    $(".btn").css("background-color", "#4a5460");
    $(".btn").eq(index).css("background-color", "#ffffff");
    f();
});

自动切换、左右切换，其对应圆点背景色也设置成白色

html+css+jquery实现轮播图自动切换、左右切换、点击切换，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 460px;
            width: 1000px;
            position: relative;
        }

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 1.5s;
        }

        .box-img:nth-child(1) {
            opacity: 1;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 50px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="static/image/1.jpg"></div>
    <div class="box-img"><img src="static/image/2.jpg"></div>
    <div class="box-img"><img src="static/image/6.jpg"></div>
    <div class="box-img"><img src="static/image/4.jpg"></div>
    <div class="box-img"><img src="static/image/5.jpg"></div>
    <div class="box-img"><img src="static/image/3.jpg"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
        </ul>
    </div>
</div>
</body>
<script src="static/js/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        function f() {
            var timer = setInterval(function () {
                $(".box-img").css("opacity", 0);
                $(".box-img").eq(index).css("opacity", 1);
                $(".btn").css("background-color", "#4a5460");
                $(".btn").eq(index).css("background-color", "#ffffff");
                if ($(".box-img").length - 1 === index) {
                    index = 0
                } else {
                    index++;
                }
            }, 4000);
        }

        f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
        // 点击圆点切换轮播图
        $(".btn").click(function () {
            clearInterval(timer);
            // 获取第几个圆点
            index = $(this).index()
            // alert(index)
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
    })
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1458581.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何在CentOS安装SQL Server数据库并实现无公网ip环境远程连接

如何在CentOS安装SQL Server数据库并实现无公网ip环境远程连接

文章目录 前言1. 安装sql server2. 局域网测试连接3. 安装cpolar内网穿透4. 将sqlserver映射到公网5. 公网远程连接6.固定连接公网地址7.使用固定公网地址连接 前言 简单几步实现在Linux centos环境下安装部署sql server数据库&#xff0c;并结合cpolar内网穿透工具&#xff0…
阅读更多...
FEP水质取样器操作方便应用环境化工行业

FEP水质取样器操作方便应用环境化工行业

FEP贝勒管&#xff0c;是一种经济型便携式 水质采样器&#xff0c;操作简单&#xff0c;使用方便&#xff0c;它是一种软塑料。 用途&#xff1a; FEP贝勒管适用于各地环境监测站、污水处理厂、水利、水务以及各科研院所&#xff0c;对工业污染源排放口、江、河、湖、海等水样…
阅读更多...
一抹中国红占据春节档“C位”，西凤“热辣滚烫”

一抹中国红占据春节档“C位”，西凤“热辣滚烫”

执笔 | 文 清 编辑 | 古利特 春节期间&#xff0c;西凤酒借“龙年喝西凤&#xff0c;龙凤呈祥”的美好寓意&#xff0c;探班春晚、众星拜年、推出贺岁主题短片《龙年有喜》&#xff0c;极富中国年味的“年夜FUN”第四季也强势回归&#xff1b;线下年夜饭酒店赠饮、直营店赠…
阅读更多...
VMware Workstation 17安装教程：安装系统

VMware Workstation 17安装教程：安装系统

点击开启虚拟机 安装向导的初始化界面 Keyboard和Language Support分别指的是键盘类型和语言支持&#xff0c;我们首先单击Time & Date按钮&#xff0c;设置系统的时区和时间。在地图上单击中国境内即可显示出上海的当前时间&#xff0c;确认后单击左上角的Done按钮。系统…
阅读更多...
【Unity】【VRTK】【VR开发】同时保持高效打包和调试的VRTK项目设置方式

【Unity】【VRTK】【VR开发】同时保持高效打包和调试的VRTK项目设置方式

【背景】 开发功能时希望能够快速调试&#xff0c;在Preview和开发编辑器间流畅切换。后期又希望快速打包到目标安卓平台&#xff0c;感受头盔内部的画面和操作效果。麻烦在于&#xff0c;这两者往往不是明确区分的&#xff0c;很可能一会儿只是想快速验证一下某些功能动作&am…
阅读更多...
数字化转型导师坚鹏：政府数字化运营三步曲之认知、行动、结果

数字化转型导师坚鹏：政府数字化运营三步曲之认知、行动、结果

政府数字化运营三步曲之认知、行动、结果 课程背景&#xff1a; 很多政府都在开展数字化运营工作&#xff0c;目前存在以下问题急需解决&#xff1a; 不清楚政府数字化运营包括哪些关键工作&#xff1f; 不清楚政府数字化运营工作的核心方法论&#xff1f; 不清楚政府数…
阅读更多...
BGP 邻居建立

BGP 邻居建立

拓扑图 配置 BGP进程号及为AS号 使用环回口建立BGP邻居关系时&#xff0c;需要指定更新源地址 EBGP在使用环回口建立邻居关系时&#xff0c;需配置EBGP多跳&#xff0c;环回口路由可达 EBGP的路由器存在IBGP邻居时&#xff0c;需要配置next-hop-local&#xff0c;保证下一跳…
阅读更多...
【小呆的力学笔记】弹塑性力学的初步认知四：简单应力状态下的应力应变关系

【小呆的力学笔记】弹塑性力学的初步认知四：简单应力状态下的应力应变关系

文章目录 2. 简单应力状态下的应力应变关系2.1 简单拉伸的应力应变关系2.2 真实应力应变关系2.3 应力-应变关系简化模型 2. 简单应力状态下的应力应变关系 我们在高中就学过&#xff0c;弹簧拉伸力和变形量成比例&#xff0c;对于一般的金属材料&#xff0c;在一定载荷以内这种…
阅读更多...
leetcode判断字母异位词

leetcode判断字母异位词

代码 public static boolean isAnagram(String s,String t){char[] x s.toCharArray();char[] y t.toCharArray();Arrays.sort(x);Arrays.sort(y);boolean val Arrays.equals(x, y);return val;} 测试如下 public static void main(String[] args) {String s "anag…
阅读更多...
PCIE Retimer

PCIE Retimer

1 Retimers retimer是一种PCIE的扩展设备&#xff0c;用于长距离高效地传输数据&#xff0c;起到一种中继器的作用。PCIe扫盲——ReTimer和ReDriver简介  在EP和RC中间最多允许两级retimers级联&#xff0c;其可以分为纯模拟类&#xff0c;它是一种对物理层协议无关的芯片&…
阅读更多...
STM32 USART详细解读（理论知识）

STM32 USART详细解读（理论知识）

文章目录 前言一、同步传输和异步传输二、UART协议三、UART硬件结构1.波特率&#xff0c;数据位&#xff0c;校验位&#xff0c;停止位设置2.数据发送流程3.数据接收流程4.中断控制 总结 前言 本篇文章来给大家讲解一下STM32中的USART&#xff0c;USART是STM32中非常重要的一个…
阅读更多...
沁恒CH32V30X学习笔记09---使用TIM 外部时钟1模式实现硬件计数

沁恒CH32V30X学习笔记09---使用TIM 外部时钟1模式实现硬件计数

TIM 外部时钟1使用 定时器时钟 通过框图可知；外部时钟1模式下仅仅只有通道1 和通道2 可以输入脉冲 简单示例教程 void TIM1_ETRClockMode1_Init(void) {RCC_APB2PeriphClockCmd(RCC_APB2Periph_TIM1, ENABLE);TIM_CounterModeConfig(TIM1, TIM_CounterMode_Up)
阅读更多...
人工智能|机器学习——基于机器学习的舌苔检测

人工智能|机器学习——基于机器学习的舌苔检测

代码下载&#xff1a; 基于深度学习的舌苔检测毕设留档.zip资源-CSDN文库 1 研究背景 1.1.研究背景与意义 目前随着人们生活水平的不断提高&#xff0c;对于中医主张的理念越来越认可&#xff0c;对中医的需求也越来越多。在诊断中&#xff0c;中医通过观察人的舌头的舌质、苔…
阅读更多...
Vue的个人笔记

Vue的个人笔记

Vue学习小tips ctrl s ----> 运行 alt b <scrip> 链接 <script src"https://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js"></script> 插值表达式 指令
阅读更多...
unplugin-vue-components解决命名冲突

unplugin-vue-components解决命名冲突

我们在vue项目中通常会利用unplugin-vue-components插件进行自定义组件的自动引入 注&#xff1a;如果不知道怎么配置unplugin-vue-components插件&#xff0c;欢迎看我整理的这篇&#xff1a; vue3项目配置按需自动引入自定义组件unplugin-vue-components 当出现同名文件时&a…
阅读更多...
详解平面点云面积计算

详解平面点云面积计算

部分代码展示&#xff1a; &#xff08;1&#xff09;利用格网法计算面积&#xff1a; //&#xff08;2&#xff09;测试使用格网法计算平面点云面积 void main() {char *inputpath "D:\\testdata\\data.txt";vector<pcl::PointXYZ> points ReadPointXYZIn…
阅读更多...
TRS 2024 论文阅读 | 基于点云处理和点Transformer网络的人体活动连续识别

TRS 2024 论文阅读 | 基于点云处理和点Transformer网络的人体活动连续识别

无线感知/雷达成像部分最新工作<持续更新>： 链接地址 注1:本文系“无线感知论文速递”系列之一,致力于简洁清晰完整地介绍、解读无线感知领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; MobiCom, Sigcom, MobiSys, NSDI, SenSys, Ubicomp; JSAC, 雷达学…
阅读更多...
百年明牌门业入围2024中国别墅门十大品牌榜单

百年明牌门业入围2024中国别墅门十大品牌榜单

一年一度的中国别墅门十大品牌网络评选活动圆满的落下帷幕。来自浙江的“百年明牌”凭借自身优异的产品品质&#xff0c;以及极佳的市场口碑&#xff0c;强势入围2024中国别墅门十大品牌榜单。 武义誉鑫安防科技有限公司坐落于素有“中国五金之都”和“中国门都”之称的永康市&…
阅读更多...
阿里云幻兽帕鲁Windows 服务器怎么下载存档？

阿里云幻兽帕鲁Windows 服务器怎么下载存档？

阿里云幻兽帕鲁Windows 服务器怎么下载存档&#xff1f;通过远程连接window服务器桌面的方式。 远程连接到阿里云的 Windows 服务器后&#xff0c;可以将压缩后的存档文件&#xff0c;拖动到 workbench\Download 目录后&#xff0c;就会触发浏览器的文件下载&#xff0c;然后将…
阅读更多...
电子防潮柜如何应对潮湿问题？

电子防潮柜如何应对潮湿问题？

智能化时代的到来&#xff0c;让电子产品成为人们生活中的必需品&#xff0c;电子产品对存储环境的要求非常高。潮湿会产生发霉、生锈、氧化、腐蚀、变形等现象&#xff0c;缩短了电子产品的寿命。绝大部分电子产品都要求在清洁低湿干燥的环境中存放&#xff0c;环境中的温湿度…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023