35.图片幻灯片

图片幻灯片

html部分

<div class="carousel"><div class="image-container"><img src="./static/20180529205331_yhGyf.jpeg" alt="" srcset=""><img src="./static/20190214214253_hsjqw.webp" alt="" srcset=""><img src="./static/20190908084721_rjhtr.png" alt="" srcset=""><img src="./static/20200205192210_tKHiT.jpeg" alt="" srcset=""></div><div class="button-container"><div class="pre">pre</div><div class="next">next</div></div>
</div>

css部分

* {margin: 0;padding: 0;
}body {display: flex;justify-content: center;align-items: center;overflow: hidden;height: 100vh;
}img {flex-shrink: 0;width: 100% !important;height: 100% !important; object-fit: cover;transition: all .7s;
}.carousel {box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.4);height: 530px;width: 500px;overflow: hidden;
}.image-container {width: 500px;height: 500px;display: flex;
}   
.button-container{display: flex;height: 30px;color: #fff;line-height: 1.8;cursor: pointer;
}
.button-container div:first-child:active{transform: scaleY(0.98) ;
}
.button-container div:last-child:active{transform: scaleY(0.98);
}
.button-container div:first-child{flex: 1;text-align: center;margin-right: 5px;background: rebeccapurple;
}
.button-container div:last-child{flex: 1;text-align: center;background: rebeccapurple;
}

js部分

// 获取dom
const pre = document.querySelector(".pre");
const next = document.querySelector(".next");
const img_box = document.querySelector(".image-container")
const imgs = document.querySelectorAll("img")// 初始活动元素
let active_index = 0// 下移
next.addEventListener("click", function (e) {active_index++if (active_index > imgs.length - 1) {active_index = 0;}change_img()
})
// 上移
pre.addEventListener("click", function (e) {active_index--if (active_index < 0) {active_index = imgs.length - 1;}change_img()
})// 所以元素前进或者后退
function change_img() {imgs.forEach((item) => {item.style.transform = `translate(${-active_index * 500}px)`})
}

效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python网络编程详解:Socket套接字的使用与开发

Python网络编程详解&#xff1a;Socket套接字的使用与开发 1. 引言 网络编程是现代应用开发中不可或缺的一部分。通过网络编程&#xff0c;我们可以实现不同设备之间的通信和数据交换&#xff0c;为用户提供更加丰富的服务和体验。Python作为一种简洁而强大的编程语言&#x…

Java 模块化Modularity- 了解与测试

1. java9后JDK后目录的变化 不见了jre,新增了jmods目录。 1&#xff09;为什么不见了jre&#xff1f; 新版JDK提供了 jlink工具&#xff0c;使用它构建一个包含jre镜像的应用程序。 就是可以打包一个引用程序内部已经包含完整或部分jre&#xff0c;可以直接运行。 2&#xf…

MP的开发流程

MP的开发流程 1、添加依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.ap…

【李宏毅 DLHLP 深度学习人类语言处理 HW1】

李宏毅 DLHLP 深度学习人类语言处理 HW1 相关资料HW1更多尝试1, 加深encoder:4层LSTM2, 加深encoder(4层LSTM)和加深decoder(2层LSTM)3, cnn代替vgg4, 再次加深decoder(4层LSTM) 语音小白在网上没有找到这门课的作业分享&#xff0c;那就记录一下自己的作业吧。 相关资料 课程…

4. 深度生成模型-扩散模型(基于扩散的生成模型与分数匹配的变分视角)

“基于扩散的生成模型”与“分数匹配”的变分视角 1. 介绍1.1. 变分自动编码器1.2. 基于扩散的建模1.3. 主要内容2. 基于得分的随机微分方程生成建模基于离散时间扩散的生成模型和分数匹配方法在高维图像数据建模方面显示出了良好的效果。 最近,Song等人(2021)表明,通过学…

基于SpringBoot+Vue的学习平台设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

小程序使用echarts

参考文档&#xff1a;echarts官网、echarts-for-weixin 第一步引入组件库&#xff0c;可直接从echarts-for-weixin下载&#xff0c;也可以从echarts官网自定义生成&#xff0c;这里我们就不贴了组件库引入好后&#xff0c;就是页面引用啦&#xff0c;废话不多说&#xff0c;直…

tinkerCAD案例:23.Tinkercad 中的自定义字体

tinkerCAD案例&#xff1a;23.Tinkercad 中的自定义字体 原文 Tinkercad Projects Tinkercad has a fun shape in the Shape Generators section that allows you to upload your own font in SVG format and use it in your designs. I’ve used it for a variety of desi…

Ansible最佳实践之Playbook使用过滤器处理网络地址

写在前面 使用过滤器检查、验证和操作包含网络信息的变量理解不足小伙伴帮忙指正 傍晚时分&#xff0c;你坐在屋檐下&#xff0c;看着天慢慢地黑下去&#xff0c;心里寂寞而凄凉&#xff0c;感到自己的生命被剥夺了。当时我是个年轻人&#xff0c;但我害怕这样生活下去&#xf…

Blazor前后端框架Known-V1.2.8

V1.2.8 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazor…

Linked List

文章目录 链表定义专业术语代码链表分类常见算法链表创建和常用算法 链表总结 链表 补充知识 typedef 给类型换名字&#xff0c;比如 typedef struct Student {int sid;char name[100];char sex; }ST;//ST就代表了struct Student //即这上方一大坨都可以用ST表示 //原先结构体…

Springer独立出版 | 2023年触觉与虚拟现实国际会议(ICHVR 2023)

会议简介 Brief Introduction 2023年触觉与虚拟现实国际会议(ICHVR 2023) 会议时间&#xff1a;2023年12月15日-17日 召开地点&#xff1a;中国北海 大会官网&#xff1a;www.ichvr.org 2023年触觉与虚拟现实国际会议(ICHVR 2023)由东南大学、上海交通大学联合主办&#xff1b;…

通过String字符生成base64编码

* base64转图片 //对字节数组字符串进行Base64解码并生成图片 * param base64str base64码 * return // param savePath 图片路径private static final String savePath"image_ver\\verifyCode"; 判断是否为base64编码 public static void mainDD…

PHP使用Redis实战实录4:单例模式和面向过程操作redis的语法

PHP使用Redis实战实录系列 PHP使用Redis实战实录1&#xff1a;宝塔环境搭建、6379端口配置、Redis服务启动失败解决方案PHP使用Redis实战实录2&#xff1a;Redis扩展方法和PHP连接Redis的多种方案PHP使用Redis实战实录3&#xff1a;数据类型比较、大小限制和性能扩展PHP使用Re…

ajax概述

目录 1.什么是ajax 2.ja原生ajax 3.jQuery框架的ajax 4.综合案例 1.什么是ajax Ajax 即"Asynchronous Javascript And XML"&#xff08;异步 JavaScript 和 XML&#xff09;&#xff0c;是指一种创建交互式网页应用的网页开发技术。Ajax 异步 JavaScript 和 XML&…

多线程(JavaEE初阶系列5)

目录 前言&#xff1a; 1.什么是定时器 2.标准库中的定时器及使用 3.实现定时器 结束语&#xff1a; 前言&#xff1a; 在上一节中小编给大家介绍了多线程中的两个设计模式&#xff0c;单例模式和阻塞式队列模式&#xff0c;在单例模式中又有两种实现方式一种是懒汉模式&a…

初识TDMQ

目录 一&#xff1a;需求背景二&#xff1a;相关文档三&#xff1a;验证TDMQ广播消息 一&#xff1a;需求背景 目前公司需要将决策引擎处理的结果&#xff0c; 一部分数据交给下游分析/入黑/通知等功能。因此就需要决策引擎生产结果让多方下游去消费。 而我需要实现下游的一部…

微信小程序转抖音小程序的坑:The component <xxx> used in pages/xxx/xxx is undefined

微信小程序组件定义在根目录的 app.json 中了&#xff0c;在抖音小程序中出现找不到的情况。 在需要用到组件的 pages 目录中页面文件夹的 json "usingComponents": {} 大括号中添加页面使用的组件&#xff0c;即可使用...

STM32使用HAL库BH1750光照度传感器

开发环境 单片机&#xff1a;STM32F103C8T6 光照度传感器&#xff1a;BH1750 IDE&#xff1a;KEILSTM32CUBEMX 单片机配置 1、STM32CUBEMX BH1750代码 1、头文件 /* ************************************************* BH1750光照数据计算&#xff08;LUX&#xff09; …

Shell脚本实现分库分表操作

目录 一&#xff0c;分库备份 二&#xff0c;分库操作 三&#xff0c;分库分表备份 四&#xff0c;备份还原 一&#xff0c;分库备份 #!/bin/bash mysql_cmd-uroot -pzly666666 bak_path/backup/db [ -d ${bak_path} ] || mkdir -p ${bak_path}mysql ${mysql_cmd} -e show…