帮我用html写一个图片轮播样式，要求中间图片放大，两边缩小，轮播效果
时间: 2024-03-26 07:38:28 浏览: 20
好的，我可以帮你写一个简单的图片轮播样式，代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
.slider {
display: flex;
position: relative;
width: 800px;
height: 400px;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px #ccc;
overflow: hidden;
}
.slide {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.slide img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.slide.center {
transform: scale(1.2);
z-index: 2;
}
.slide.left {
transform: translateX(-200px) scale(0.8);
}
.slide.right {
transform: translateX(200px) scale(0.8);
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<div class="slide center">
<img src="https://picsum.photos/800/400?random=1" alt="slide 1">
</div>
<div class="slide left">
<img src="https://picsum.photos/800/400?random=2" alt="slide 2">
</div>
<div class="slide right">
<img src="https://picsum.photos/800/400?random=3" alt="slide 3">
</div>
</div>
</div>
<script>
var center = document.querySelector('.center');
var left = document.querySelector('.left');
var right = document.querySelector('.right');
function slideLeft() {
center.classList.remove('center');
center.classList.add('right');
right.classList.remove('right');
right.classList.add('center');
left.classList.remove('left');
left.classList.add('right');
var newLeft = document.createElement('div');
newLeft.classList.add('slide', 'left');
newLeft.innerHTML = '<img src="https://picsum.photos/800/400?random=' + (Math.floor(Math.random() * 100) + 4) + '" alt="slide">';
document.querySelector('.slider').appendChild(newLeft);
}
function slideRight() {
center.classList.remove('center');
center.classList.add('left');
left.classList.remove('left');
left.classList.add('center');
right.classList.remove('right');
right.classList.add('left');
var newRight = document.createElement('div');
newRight.classList.add('slide', 'right');
newRight.innerHTML = '<img src="https://picsum.photos/800/400?random=' + (Math.floor(Math.random() * 100) + 4) + '" alt="slide">';
document.querySelector('.slider').appendChild(newRight);
}
setInterval(slideLeft, 5000);
document.addEventListener('keydown', function(event) {
if (event.keyCode === 37) {
slideRight();
}
if (event.keyCode === 39) {
slideLeft();
}
});
</script>
</body>
</html>
```
这段代码使用了 flex 布局和绝对定位来实现图片轮播效果。其中，中间的图片放大，两边的图片缩小，可以通过 `.slide` 的 `transform` 属性来实现。轮播效果可以通过 JS 来实现，这里使用了 `setInterval` 函数来定时轮播图片，同时也可以通过键盘左右箭头来切换图片。
希望这个样式能够满足你的需求，如果有任何问题，可以随时向我提问哦！
相关推荐
最新推荐
全面解析多种Bootstrap图片轮播效果
分享了三种Bootstrap图片轮播效果，相信总有一款你满意的！ 第一种效果：Bootstrap简单轮播 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title...
Jquery代码实现图片轮播效果（一）
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。 事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定...
Unity实现图片轮播组件
主要为大家详细介绍了Unity实现图片轮播组件的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解android 视频图片混合轮播实现
主要介绍了android 视频图片混合轮播实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
bootstrap实现图片自动轮播
bootstrap图片自动轮播效果图： 代码实现： <!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href=...
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
MATLAB图像处理算法宝典：从理论到实战
# 1. MATLAB图像处理基础理论
MATLAB图像处理是一种利用MATLAB编程语言进行图像处理的强大工具。它提供了丰富的函数和工具箱，用于图像获取、增强、分
matlab中1/x的非线性规划
在MATLAB中，可以使用非线性规划函数（`fmincon`）来优化一个包含1/x的非线性目标函数。下面是一个简单的例子：
```matlab
% 定义目标函数
fun = @(x) 1/x;
% 定义约束函数（这里没有约束）
nonlcon = [];
% 定义初始点
x0 = 1;
% 定义优化选项
options = optimoptions('fmincon', 'Display', 'iter');
% 进行非线性规划
[x, fval] = fmincon(fun, x0, [], [], [], [], [], [], nonlcon, options);
```
在
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。