当前位置：首页 > 行业动态 > 正文

如何用CSS和JS实现一个简单的图片轮播效果？

admin
行业动态
2025-01-26
7

本文介绍了使用HTML、CSS和JavaScript实现图片轮播的方法，包括自动播放、鼠标控制和左右焦点切换功能。

一、HTML部分

创建一个包含图片容器、左右箭头按钮的基本结构，用于放置轮播图的图片和控制按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="box">
        <!-放图片 -->
        <div id="lunboimg">
            <a href="#">
                <img src="img/0.jpg" />
            </a>
        </div>
        <!-放底部圆点 -->
        <div id="selector">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <!-左箭头 -->
        <div id="left">&lt;</div>
        <!-右箭头 -->
        <div id="right">&gt;</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS部分

通过CSS设置图片轮播的布局和样式，包括图片的大小、轮播容器的宽高、过渡效果等。

如何用CSS和JS实现一个简单的图片轮播效果？

{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#box {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
#lunboimg {
    width: 200px;
    height: 200px;
    position: absolute;
    display: flex;
}
a {
    height: 200px;
    width: 200px;
}
img {
    width: 200px;
    height: 200px;
    margin: 0;
}
#box:hover #selector {
    display: flex;
}
#selector {
    width: 80px;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 60px;
    display: none;
    justify-content: space-between;
    z-index: 100;
}
#selector span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: lightsalmon;
    opacity: 0.8;
    margin-right: 5px;
    cursor: pointer;
}
#selector span:hover {
    background-color: #8A8A8A;
}
#left, #right {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
}
#left {
    left: 10px;
}
#right {
    right: 10px;
}

三、JavaScript部分

使用JavaScript控制图片的切换，包括自动播放、手动切换以及鼠标移入移出时的控制。

如何用CSS和JS实现一个简单的图片轮播效果？

//获取图片元素和圆点元素
let img = document.querySelector('img');
let span = document.querySelectorAll('span');
let left = document.getElementById('left');
let right = document.getElementById('right');
//初始化当前图片下标
let index = 0;
//定时器变量，用于存储自动播放的定时器ID
let timer;
//设置定时器让轮播图自动播放，每隔1秒切换一张图片
timer = setInterval(function () {
    if (index == span.length) {
        index = 0;
    }
    show();
    index++;
}, 1000);
//定义显示图片的函数，根据当前下标切换图片地址并更新圆点状态
function show() {
    img.src = 'img/' + index + '.jpg'; //假设图片文件名为0.jpg、1.jpg、2.jpg等，按顺序命名
    for (let i = 0; i < span.length; i++) {
        span[i].style.backgroundColor = 'lightsalmon'; //恢复圆点颜色
    }
    span[index].style.backgroundColor = '#8A8A8A'; //高亮当前圆点
}
//为每个小圆点设置点击事件，点击后切换到对应图片并停止自动播放，鼠标移开后继续播放
for (let i = 0; i < span.length; i++) {
    span[i].onclick = function () {
        index = i;
        show();
        clearInterval(timer); //停止自动播放
        autoPlay(); //重新开始自动播放，从当前图片开始播放
    }
    span[i].addEventListener('mouseenter', function () {
        clearInterval(timer); //鼠标移入时停止自动播放
    });
    span[i].addEventListener('mousemove', function () {
        autoPlay(); //鼠标移出时重新开始自动播放，从当前图片开始播放
    });
}
//为左右箭头设置点击事件，实现手动切换图片功能，并确保切换后继续自动播放
left.onclick = function () {
    if (index <= 0) {
        index = span.length 1;
    } else {
        index--;
    }
    show();
    clearInterval(timer); //停止自动播放
    autoPlay(); //重新开始自动播放，从当前图片开始播放
}
right.onclick = function () {
    if (index == span.length) {
        index = 0;
    }
    index++;
    show();
    clearInterval(timer); //停止自动播放
    autoPlay(); //重新开始自动播放，从当前图片开始播放
}
//定义重新开始自动播放的函数，用于在鼠标移出圆点或点击箭头后继续播放轮播图
function autoPlay() {
    timer = setInterval(function () {
        if (index == span.length) {
            index = 0;
        }
        show();
        index++;
    }, 1000);
}