【使用HTML、CSS和JavaScript实现简易图片translate平移轮播效果】_css 轮播图的平移切换效果要有过程-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80064693/article/details/145256632

使用HTML、CSS和JavaScript实现简易图片translate平移轮播效果

使用HTML、CSS和JavaScript实现简易图片translate平移轮播效果

使用HTML、CSS和JavaScript实现简易图片translate平移轮播效果

引言
在网页设计中，图片轮播是一种常见的交互元素，用于展示一系列图片或广告。本文将介绍如何使用HTML、CSS和JavaScript实现一个简易的图片translate平移轮播效果。我们将逐步解析代码，涵盖布局、样式以及交互逻辑的实现。

运行视频

使用HTML、CSS和JavaScript实现简易图片translate平移轮播效果

一、技术栈

HTML： 用于构建页面的基本结构。
CSS： 用于设置页面的样式和布局。
JavaScript： 用于实现轮播的交互逻辑。
jQuery（可选）： 简化DOM操作，本文中使用了一点jQuery来获取元素。

二、HTML结构

首先，我们定义轮播图的基本HTML结构：

<div class="banner">
    <div class="img_list">
        <img src="../img/lyx8.jpg" />
        <img src="../img/lyx2.jpg" />
        <img src="../img/lyx9.heif" />
        <img src="../img/lyx10.heif" />
        <img src="../img/lyx11.jpg" />
        <img src="../img/lyx7.heif" />
    </div>
    <button class="button prev"><<</button>
    <button class="button next">>></button>
    <div class="dot"></div>
</div>

.banner：轮播图的容器，设置position: relative以便定位内部元素。
.img_list：包含所有图片的容器，设置width为一个大值以确保所有图片可以并排显示。
button：左右切换按钮。
.dot：用于显示当前图片索引的控制器。

三、CSS样式

接下来，我们为轮播图设置样式：

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner {
    width: 1000px;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.img_list {
    width: 10000px;
    height: 500px;
    position: absolute;
    left: 0;
    transition: transform 1s ease-in-out;
}

.banner img {
    float: left;
    width: 1000px;
    height: 500px;
    object-fit: cover;
}

.button {
    position: absolute;
    width: 30px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    height: 100px;
    top: 200px;
    cursor: pointer;
    outline: none;
    border: 0px;
}

.next {
    right: 0px;
}

.dot {
    padding: 10px;
    position: absolute;
    bottom: 15px;
    left: 45%;
}

.dot span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    margin: 0 5px 0 0;
}

.dot .active1 {
    border: 2px solid orange;
}

.banner：设置固定宽高，并隐藏溢出内容。
.img_list：设置大宽度以容纳所有图片，并添加过渡效果。
.banner img：设置图片宽高和填充方式。
.button：设置按钮样式和位置。
.dot和.dot span：设置控制器的样式。

四、JavaScript逻辑

最后，我们实现轮播图的交互逻辑：

// 获取元素
let oImg_list = $(".img_list")[0];
let oImgs = oImg_list.getElementsByTagName("img");
let oPrev = document.querySelector(".prev");
let oNext = document.querySelector(".next");
let oDot = document.querySelector(".dot");

// 初始化当前索引
let currentIndex = 0;

// 创建控制器
function createDot() {
    Array.from(oImgs).forEach(function (img, index) {
        const oSpan = document.createElement("span");
        oSpan.addEventListener("click", function () {
            showImage(index);
        });
        oDot.appendChild(oSpan);
    });
    oDot.getElementsByTagName("span")[0].className = "active1";
}

// 展示图片的方法
function showImage(index) {
    if (index < 0 || index >= oImgs.length) {
        console.error("无效的图片索引: " + index);
        return;
    }
    currentIndex = index;
    updateDot();
    updateTranslate();
}

// 更新控制器
function updateDot() {
    Array.from(oDot.getElementsByTagName("span")).forEach(function (span, index) {
        span.classList.toggle("active1", index === currentIndex);
    });
}

// 更新平移
function updateTranslate() {
    oImg_list.style.transform = `translateX(-${currentIndex * 1000}px)`;
}

// 下一张
function nextImage() {
    currentIndex = (currentIndex + 1) % oImgs.length;
    showImage(currentIndex);
}

// 上一张
function prevImage() {
    currentIndex = (currentIndex - 1 + oImgs.length) % oImgs.length;
    showImage(currentIndex);
}

// 添加按钮点击事件
oNext.addEventListener("click", nextImage);
oPrev.addEventListener("click", prevImage);

// 创建控制器
createDot();

// 开启定时器
let timer = setInterval(nextImage, 2000);

// 鼠标移入移出事件
let oBanner = document.querySelector(".banner");
oBanner.addEventListener("mouseover", function () {
    clearInterval(timer);
});

oBanner.addEventListener("mouseout", function () {
    timer = setInterval(nextImage, 2000);
});

// 初始化显示
showImage(currentIndex);