左右拖动切换图片效果案例("左右滑动切换图片效果实现教程")

原创

ithorizon 6个月前 (10-21) 阅读数 23 #后端开发

左右滑动切换图片效果实现教程

在现代的网页设计中，图片轮播效果是非常常见的一种设计元素，它不仅可以吸引用户的注意力，还能有效地展示产品或内容。本文将详细介绍怎样使用HTML、CSS和JavaScript实现一个左右滑动切换图片的效果。

一、准备工作

在开端编写代码之前，我们需要准备以下素材：

一组图片（建议至少4张，以实现无缝切换）

一个HTML页面

二、HTML结构

首先，我们需要创建一个HTML结构，用于容纳图片和切换按钮。


<div id="slider">
    <div class="slides">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <img src="image4.jpg" alt="Image 4">
    </div>
    <div class="prev"><< prev</div>
    <div class="next">next >></div>
</div>

三、CSS样式

接下来，我们需要添加一些CSS样式来美化我们的轮播图。


#slider {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}
.slides img {
    width: 500px;
    height: 300px;
    display: none;
}
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
}
.prev {
    left: 10px;
}
.next {
    right: 10px;
}

四、JavaScript逻辑

现在，我们将使用JavaScript来实现图片的左右滑动切换功能。


let currentSlide = 0;
const slides = document.querySelectorAll('.slides img');
const totalSlides = slides.length;
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
function showSlide(index) {
    slides.forEach((slide) => {
        slide.style.display = 'none';
    });
    slides[index].style.display = 'block';
}
function nextSlide() {
    currentSlide = (currentSlide + 1) % totalSlides;
    showSlide(currentSlide);
}
function prevSlide() {
    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
    showSlide(currentSlide);
}
prevButton.addEventListener('click', prevSlide);
nextButton.addEventListener('click', nextSlide);
showSlide(currentSlide); // 显示第一张图片

五、添加触摸事件

为了实现触摸滑动效果，我们需要在JavaScript中添加触摸事件监听器。


let startX;
function touchStart(event) {
    startX = event.touches[0].clientX;
}
function touchMove(event) {
    event.preventDefault();
}
function touchEnd(event) {
    let endX = event.changedTouches[0].clientX;
    if (startX - endX > 50) {
        nextSlide();
    } else if (startX - endX < -50) {
        prevSlide();
    }
}
slider.addEventListener('touchstart', touchStart);
slider.addEventListener('touchmove', touchMove);
slider.addEventListener('touchend', touchEnd);