<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" 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-gradient(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-bezier(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.classList.remove('active', 'prev', 'next');
if (i === currentIndex) {
img.classList.add('active');
} else if (i === (currentIndex - 1 + images.length) % images.length) {
img.classList.add('prev');
} else if (i === (currentIndex + 1) % images.length) {
img.classList.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.classList.remove('active', 'prev', 'next');
img.style.transform = '';
img.style.zIndex = '';
});
// 设置新层级状态
currentImg.classList.add(direction === 'right' ? 'next' : 'prev');
nextImg.classList.add('active');
// 设置相邻图片
const prevIndex = (currentIndex - 1 + images.length) % images.length;
const nextIndex = (currentIndex + 1) % images.length;
imgElements[prevIndex].classList.add('prev');
imgElements[nextIndex].classList.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.clientX;
container.addEventListener('mousemove', handleMouseMove);
container.addEventListener('mouseup', handleMouseUp);
}
function handleMouseMove(e) {
const dragDistance = e.clientX - dragStartX;
// 拖动超过100px时切换图片
if (Math.abs(dragDistance) > 50) {
const direction = dragDistance > 0 ? 'right' : 'left';
changeSlide(direction);
dragStartX = e.clientX; // 重置起点
}
}
function handleMouseUp() {
container.removeEventListener('mousemove', handleMouseMove);
container.removeEventListener('mouseup', handleMouseUp);
}
// 添加鼠标事件监听
container.addEventListener('mousedown', handleMouseDown);
// 初始化轮播
initSlider();
</script>
</body>
</html>
现在是需要拖拽一下,才能根据鼠标的左右移动进行切换图片,我希望不用拖拽,直接根据鼠标移动的左右方向大于50px的时候切换图片,其它代码内容不要改,html js css 保持写到一起