首先展示一下实际效果:
老规矩,直接上代码:
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS样式代码 */
.slider-container {
position: relative;
width: 600px;
/* 设置轮播图容器宽度 */
height: 400px;
/* 设置轮播图容器高度 */
overflow: hidden;
/* 隐藏超出容器的部分 */
margin: 0 auto;
}
.slider {
display: flex;
transition: transform 0.3s ease-in-out;
/* 添加过渡效果 */
}
.slider-item {
flex-shrink: 0;
width: 100%;
/* 设置每张图片的宽度 */
height: 100%;
/* 设置每张图片的高度 */
}
.slider-item img {
width: 100%;
/* 设置每张图片的宽度 */
height: 100%;
/* 设置每张图片的高度 */
}
.slider-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1;
/* 将导航按钮置于轮播图上方 */
}
.slider-controls button {
background-color: #333;
color: #fff;
border: none;
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
}
.slider-controls .prev-btn::before,
.slider-controls .next-btn::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
margin-right: 5px;
}
.slider-controls .prev-btn::before {
transform: rotate(-135deg);
margin-right: 0;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider">
<div class="slider-item">
<img src="./img/1.jpg" alt="Image 1">
</div>
<div class="slider-item">
<img src="./img/2.jpg" alt="Image 2">
</div>
<div class="slider-item">
<img src="./img/3.jpg" alt="Image 3">
</div>
<div class="slider-item">
<img src="./img/4.jpg" alt="Image 4">
</div>
</div>
<div class="slider-controls">
<button class="prev-btn"></button>
<button class="next-btn"></button>
</div>
</div>
<script>
const sliderContainer = document.querySelector('.slider-container');
const slider = document.querySelector('.slider');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const slideWidth = document.querySelector('.slider-item').offsetWidth;
let currentPosition = 0;
let isPaused = false;
// 自动轮播
const autoPlay = () => {
if (!isPaused) {
currentPosition -= slideWidth;
if (currentPosition <= -(slideWidth * (slider.children.length - 1))) {
currentPosition = 0;
}
slider.style.transform = `translateX(${currentPosition}px)`;
}
setTimeout(autoPlay, 2000);
};
// 鼠标悬停/离开事件监听器
sliderContainer.addEventListener('mouseenter', () => {
isPaused = true;
});
sliderContainer.addEventListener('mouseleave', () => {
isPaused = false;
});
// 上一页按钮点击事件监听器
prevBtn.addEventListener('click', () => {
currentPosition += slideWidth;
if (currentPosition > 0) {
currentPosition = -(slideWidth * (slider.children.length-1));
}
slider.style.transform = `translateX(${currentPosition}px)`;
});
// 下一页按钮点击事件监听器
nextBtn.addEventListener('click', () => {
currentPosition -= slideWidth;
if (currentPosition <= -(slideWidth * (slider.children.length))) {
currentPosition = 0;
}
slider.style.transform = `translateX(${currentPosition}px)`;
});
// 启动自动轮播
autoPlay();
</script>
</body>
</html>
这段代码实现了一个简单的轮播图功能。具体功能如下:
1. 自动轮播功能:使用`autoPlay()`函数实现自动切换图片的效果。函数首先检查`isPaused`变量的值,如果为`false`表示没有暂停,则将`currentPosition`减去一个图片的宽度。然后检查是否已经达到了最后一张图片,如果是,则将`currentPosition`重置为0,实现循环播放效果。最后,通过设置轮播图容器的`transform`属性,使用`translateX()`函数来实现图片的平移动画效果。然后使用`setTimeout()`方法来实现定时循环调用`autoPlay()`函数,以实现自动播放的功能。
// 自动轮播
const autoPlay = () => {
if (!isPaused) {
currentPosition -= slideWidth;
if (currentPosition <= -(slideWidth * (slider.children.length - 1))) {
currentPosition = 0;
}
slider.style.transform = `translateX(${currentPosition}px)`;
}
setTimeout(autoPlay, 2000);
};
2.. 鼠标悬停/离开事件功能:通过使用`addEventListener()`方法,为轮播图容器添加了`mouseenter`和`mouseleave`事件监听器。当鼠标进入容器时,将`isPaused`变量设置为`true`,表示暂停自动轮播。当鼠标离开容器时,将`isPaused`变量设置为`false`,表示恢复自动轮播。
// 鼠标悬停/离开事件监听器
sliderContainer.addEventListener('mouseenter', () => {
isPaused = true;
});
sliderContainer.addEventListener('mouseleave', () => {
isPaused = false;
});
3. 上一页按钮点击事件功能:通过使用`addEventListener()`方法,为上一页按钮添加了`click`事件监听器。当点击按钮时,将`currentPosition`增加一个图片的宽度。然后检查是否已经达到了第一张图片,如果是,则将`currentPosition`设置为最后一张图片的位置,实现循环切换效果。最后,通过设置轮播图容器的`transform`属性,使用`translateX()`函数来实现图片的平移动画效果。
// 上一页按钮点击事件监听器
prevBtn.addEventListener('click', () => {
currentPosition += slideWidth;
if (currentPosition > 0) {
currentPosition = -(slideWidth * (slider.children.length-1));
}
slider.style.transform = `translateX(${currentPosition}px)`;
});
4. 下一页按钮点击事件功能:通过使用`addEventListener()`方法,为下一页按钮添加了`click`事件监听器。当点击按钮时,将`currentPosition`减去一个图片的宽度。然后检查是否已经达到了最后一张图片,如果是,则将`currentPosition`重置为0,实现循环切换效果。最后,通过设置轮播图容器的`transform`属性,使用`translateX()`函数来实现图片的平移动画效果。
// 下一页按钮点击事件监听器
nextBtn.addEventListener('click', () => {
currentPosition -= slideWidth;
if (currentPosition <= -(slideWidth * (slider.children.length))) {
currentPosition = 0;
}
slider.style.transform = `translateX(${currentPosition}px)`;
});
觉得有用的好兄弟们点个赞吧TAT