js图片切换效果代码|极客笔记

js图片切换效果代码

在网页开发中，经常会遇到需要实现图片切换的效果，比如轮播图、图片幻灯片等。本文将介绍如何使用javascript实现一个简单的图片切换效果。

1. HTML结构

首先，我们需要在HTML中创建一个图片容器，用来显示需要切换的图片。同时，我们需要添加一些控制按钮，用来实现切换功能。以下是一个简单的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="style.css">
</head>
<body>
    <div class="image-container">
        <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="controls">
        <button onclick="prevImage()">上一张</button>
        <button onclick="nextImage()">下一张</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS样式

为了让页面看起来更加美观，我们可以添加一些CSS样式来美化图片容器和按钮。以下是一个简单的CSS样式示例：

.image-container {
    width: 500px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    position: relative;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.controls {
    margin-top: 10px;
}

button {
    padding: 5px 10px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-right: 10px;
}

3. Javascript代码

接下来，我们需要编写javascript代码来实现图片切换的功能。具体思路是，通过控制按钮点击事件来切换图片的src属性。以下是一个简单的javascript代码示例：

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg'];
let currentIndex = 0;
const imageElement = document.querySelector('.image-container img');

function prevImage() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    imageElement.src = images[currentIndex];
}

function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    imageElement.src = images[currentIndex];
}

在上面的代码中，我们首先定义了一个images数组，包含了所有需要切换的图片路径。然后定义了一个变量currentIndex来记录当前显示的图片索引。prevImage和nextImage分别是点击上一张和下一张按钮时触发的事件处理函数，通过改变currentIndex的值来切换图片。