用H5写一个包含三张图片的幻灯片能左右划动的网页
时间: 2023-05-31 18:06:35 浏览: 62
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片幻灯片</title>
<style>
body {
margin: 0;
padding: 0;
}
#slider {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
#slider img {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
#slider .prev, #slider .next {
width: 50px;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 1;
cursor: pointer;
}
#slider .prev {
left: 0;
}
#slider .next {
right: 0;
}
</style>
</head>
<body>
<div id="slider">
<img src="https://via.placeholder.com/1920x500.png?text=Image+1" alt="image 1">
<img src="https://via.placeholder.com/1920x500.png?text=Image+2" alt="image 2">
<img src="https://via.placeholder.com/1920x500.png?text=Image+3" alt="image 3">
<div class="prev"></div>
<div class="next"></div>
</div>
<script>
var slider = document.getElementById("slider");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var images = slider.getElementsByTagName("img");
var currentIndex = 0;
// 显示当前图片
function showImage(index) {
for (var i = 0; i < images.length; i++) {
if (i === index) {
images[i].style.display = "block";
} else {
images[i].style.display = "none";
}
}
currentIndex = index;
}
// 上一张图片
function prevImage() {
if (currentIndex === 0) {
showImage(images.length - 1);
} else {
showImage(currentIndex - 1);
}
}
// 下一张图片
function nextImage() {
if (currentIndex === images.length - 1) {
showImage(0);
} else {
showImage(currentIndex + 1);
}
}
// 点击左右按钮切换图片
prev.addEventListener("click", prevImage);
next.addEventListener("click", nextImage);
// 左右滑动切换图片
var startX = 0;
var endX = 0;
slider.addEventListener("touchstart", function(event) {
startX = event.touches[0].clientX;
});
slider.addEventListener("touchend", function(event) {
endX = event.changedTouches[0].clientX;
if (endX - startX > 50) {
prevImage();
} else if (startX - endX > 50) {
nextImage();
}
});
// 自动轮播
var timer = setInterval(function() {
nextImage();
}, 3000);
// 鼠标放在幻灯片上停止轮播，移开继续轮播
slider.addEventListener("mouseover", function() {
clearInterval(timer);
});
slider.addEventListener("mouseout", function() {
timer = setInterval(function() {
nextImage();
}, 3000);
});
// 显示第一张图片
showImage(0);
</script>
</body>
</html>
相关推荐
最新推荐
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
主要介绍了JS移动端/H5同时选择多张图片上传并使用canvas压缩图片,需要的朋友可以参考下
vue写h5页面的方法总结
下面就是小编带给大家的如何用vue写h5页面方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。 1、当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么...
埃森哲制药企业数字化转型项目顶层规划方案glq.pptx
埃森哲制药企业数字化转型项目顶层规划方案glq.pptx
华为OD机试D卷 - 机场航班调度程序 - 免费看解析和代码.html
私信博主免费获取真题解析以及代码
基于FPGA读取设计的心电图代码源码+全部资料齐全.zip
【资源说明】
基于FPGA读取设计的心电图代码源码+全部资料齐全.zip基于FPGA读取设计的心电图代码源码+全部资料齐全.zip
【备注】
1、该项目是高分课程设计项目源码，已获导师指导认可通过，答辩评审分达到95分
2、该资源内项目代码都经过mac/window10/11/linux测试运行成功，功能ok的情况下才上传的，请放心下载使用！
3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也可作为课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。
4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于课设、作业等。
欢迎下载，沟通交流，互相学习，共同进步！
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
用 Python 画一个可以动的爱心
好的，我可以帮助您使用Python来绘制一个动态的爱心。您可以使用turtle库来实现。以下是实现代码：
```python
import turtle
import math
# 设置画布和画笔
canvas = turtle.Screen()
canvas.bgcolor("black")
pencil = turtle.Turtle()
pencil.speed(0)
pencil.color("red", "pink")
pencil.pensize(3)
# 定义爱心函数
def draw_love(heart_size, x_offset=0, y_offset=0):
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。