<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="v
iewport" content="width=device-width, initial-scale=1
.0"/>
<
style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html {
height: 100%;
overflow: hidden;
font-family: sans-serif;
cursor: ew-resize; /* 添加左右箭头光标 */
}
header {
position: fixed;
width: 100%;
background: rgba
(0,0,0,0
.3
);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
}
.logo {
color: white;
font-size: 1
.8rem;
font-weight: bold;
text-decoration: none;
}
nav {
display: flex;
gap: 30px;
background: transparent;
}
nav a {
color: white;
font-size: 1
.1rem;
text-decoration: none;
padding: 8px 12px;
transition: all 0
.3s ease;
}
nav a:hover {
background: rgba
(255,255,255,0
.1
);
border-radius: 4px;
cursor: pointer;
}
.image-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
/* 添加拖动提示效果 */
background: linear-grad
ient
(90deg,
rgba
(255,255,255,0
.1
) 0%,
transparent 50%,
rgba
(255,255,255,0
.1
) 100%
);
background-size: 200% 100%;
animation: dragHint 3s infinite;
}
.image-container img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
/* 延长动画时间至3秒 */
transition: transform 0
.8s cubic-bez
ier
(0
.22, 0
.61, 0
.36, 1
);
transform: translateX
(0
);
z-index: 1;
}
.image-container img
.active {
z-index: 3; /* 当前图片在顶层 */
}
.image-container img
.prev {
z-index: 2; /* 前一张在中间层 */
transform: translateX
(-100%
);
}
.image-container img
.next {
z-index: 2; /* 后一张在中间层 */
transform: translateX
(100%
);
}
.title-container {
position: absolute;
top: 140px;
left: 40px;
z-index: 4; /* 标题在最顶层 */
max-width: 60%;
}
.main-title {
font-size: 2
.4rem;
color: white;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 1px 1px 4px rgba
(0,0,0,0
.5
);
/* 延长标题动画时间 */
transition: transform 0
.8s ease, opacity 0
.8s ease;
}
.sub-title {
font-size: 1
.2rem;
color: rgba
(255,255,255,0
.9
);
font-
style: italic;
/* 延长副标题动画时间 */
transition: transform 0
.8s ease, opacity 0
.8s ease;
}
/* 拖动提示动画 */
@keyframes dragHint {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
/* 光标提示区域 */
.drag-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX
(-50%
);
z-index: 5;
background: rgba
(0,0,0,0
.6
);
padding: 10px 20px;
border-radius: 30px;
color: white;
font-size: 1rem;
display: flex;
align-items: center;
gap: 10px;
}
.drag-indicator::after {
content: "← 拖动
鼠标切换 →";
}
@media
(max-width: 768px
) {
.main-title { font-size: 1
.8rem; }
.sub-title { font-size: 1rem; }
.title-container { top: 140px; }
header { padding: 15px 20px; }
.drag-indicator { font-size: 0
.8rem; }
}
</
style>
</head>
<body>
<header>
<a href="#" class="logo">我的网站</a>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系</a>
</nav>
</header>
<div class="image-container">
<div class="title-container">
<div class="main-title" id="mainTitle">标题1</div>
<div class="sub-title" id="subTitle">副标题1</div>
</div>
<div class="drag-indicator"></div>
</div>
<script>
// 10张图片数据
const images = [
{ src: 'img/1
.jpg', title: '标题1', subtitle: '副标题1' },
{ src: 'img/2
.jpg', title: '标题2', subtitle: '副标题2' },
{ src: 'img/3
.jpg', title: '标题3', subtitle: '副标题3' },
{ src: 'img/4
.jpg', title: '标题4', subtitle: '副标题4' },
{ src: 'img/5
.jpg', title: '标题5', subtitle: '副标题5' },
{ src: 'img/6
.jpg', title: '标题6', subtitle: '副标题6' },
{ src: 'img/7
.jpg', title: '标题7', subtitle: '副标题7' },
{ src: 'img/8
.jpg', title: '标题8', subtitle: '副标题8' }
];
let currentIndex = 0;
let isAnimating = false;
let dragStartX = 0;
const container = document
.querySelector
('
.image-container'
);
const mainTitle = document
.getElementById
('mainTitle'
);
const subTitle = document
.getElementById
('subTitle'
);
// 动态生成图片元素
images
.forEach
((img, index
) => {
const imgElement = document
.createElement
('img'
);
imgElement
.src = img
.src;
imgElement
.dataset
.index = index;
container
.appendChild
(imgElement
);
}
);
const imgElements = document
.querySelectorAll
('
.image-container img'
);
// 初始化层级状态
function initSlider
() {
imgElements
.forEach
((img, i
) => {
img
.class
List.remove
('active', 'prev', 'next'
);
if
(i === currentIndex
) {
img
.class
List.add
('active'
);
} else if
(i ===
(currentIndex - 1 + images
.length
) % images
.length
) {
img
.class
List.add
('prev'
);
} else if
(i ===
(currentIndex + 1
) % images
.length
) {
img
.class
List.add
('next'
);
}
}
);
updateTitles
();
}
function
updateTitles
() {
mainTitle
.textContent = images[currentIndex]
.title;
subTitle
.textContent = images[currentIndex]
.subtitle;
}
function changeSlide
(direction
) {
if
(isAnimating
) return;
isAnimating = true;
// 添加标题动画效果
mainTitle
.style.transform = 'translateY
(-20px
)';
mainTitle
.style.opacity = '0';
subTitle
.style.transform = 'translateY
(20px
)';
subTitle
.style.opacity = '0';
// 计算新索引
const prevIndex = currentIndex;
if
(direction === 'right'
) {
currentIndex =
(currentIndex - 1 + images
.length
) % images
.length;
} else {
currentIndex =
(currentIndex + 1
) % images
.length;
}
// 获取新旧图片元素
const currentImg = imgElements[prevIndex];
const nextImg = imgElements[currentIndex];
// 设置层级关系
currentImg
.style.zIndex = '2';
nextImg
.style.zIndex = '3';
// 设置动画方向
if
(direction === 'right'
) {
currentImg
.style.transform = 'translateX
(100%
)';
nextImg
.style.transform = 'translateX
(0
)';
} else {
currentImg
.style.transform = 'translateX
(-100%
)';
nextImg
.style.transform = 'translateX
(0
)';
}
// 动画结束后重置状态
setTimeout
(() => {
// 重置所有图片状态
imgElements
.forEach
(img => {
img
.class
List.remove
('active', 'prev', 'next'
);
img
.style.transform = '';
img
.style.zIndex = '';
}
);
// 设置新层级状态
currentImg
.class
List.add
(direction === 'right' ? 'next' : 'prev'
);
nextImg
.class
List.add
('active'
);
// 设置相邻图片
const prevIndex =
(currentIndex - 1 + images
.length
) % images
.length;
const nextIndex =
(currentIndex + 1
) % images
.length;
imgElements[prevIndex]
.class
List.add
('prev'
);
imgElements[nextIndex]
.class
List.add
('next'
);
// 重置标题状态
mainTitle
.style.transform = '';
mainTitle
.style.opacity = '';
subTitle
.style.transform = '';
subTitle
.style.opacity = '';
updateTitles
();
isAnimating = false;
}, 0
.8
); // 动画时间改为3秒
}
//
鼠标事件处理函数
function handleMouseDown
(e
) {
dragStartX = e
.cl
ientX;
container
.addEvent
Listener
('mousemove', handleMouseMove
);
container
.addEvent
Listener
('mouse
up', handleMouse
Up);
}
function handleMouseMove
(e
) {
const dragDistance = e
.cl
ientX - dragStartX;
// 拖动超过100px时切换图片
if
(Math
.abs
(dragDistance
) > 50
) {
const direction = dragDistance > 0 ? 'right' : 'left';
changeSlide
(direction
);
dragStartX = e
.cl
ientX; // 重置起点
}
}
function handleMouse
Up() {
container
.removeEvent
Listener
('mousemove', handleMouseMove
);
container
.removeEvent
Listener
('mouse
up', handleMouse
Up);
}
// 添加
鼠标事件监听
container
.addEvent
Listener
('mousedown', handleMouseDown
);
// 初始化轮播
initSlider
();
</script>
</body>
</html>
现在是需要拖拽一下，才能根据
鼠标的左右移动进行切换图片，我希望不用拖拽，直接根据
鼠标移动的左右方向大于50px的时候切换图片，其它代码内容不要改，html js css 保持写到一起
扫一扫
1939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
