如何使用MySQL和JavaScript实现一个简单的图片轮播功能-编程学习网

这篇文章将为大家详细讲解有关如何使用MySQL和JavaScript实现一个简单的图片轮播功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

使用 MySQL 和 JavaScript 实现图片轮播

MySQL 数据库设置

创建一个名为 "images" 的数据库表。
创建以下字段：
- id (INT, 主键)
- image_url (VARCHAR(255))

插入一些图像的 URL，例如：

INSERT INTO images (image_url) VALUES ("image1.jpg");
INSERT INTO images (image_url) VALUES ("image2.jpg");
INSERT INTO images (image_url) VALUES ("image3.jpg");

JavaScript 客户端脚本

使用 AJAX 从 MySQL 中获取图像 URL 列表。

function getImages() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/get_images", true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      const images = JSON.parse(xhr.responseText);
      showImages(images);
    }
  };
  xhr.send();
}

创建一个 showImages() 函数来显示轮播图像。

function showImages(images) {
  const carousel = document.getElementById("carousel");
  images.forEach((image) => {
    const img = document.createElement("img");
    img.src = image.image_url;
    carousel.appendChild(img);
  });
}

设置轮播功能。

function slideImages() {
  const carousel = document.getElementById("carousel");
  const images = carousel.children;
  let currentImage = 0;
  setInterval(() => {
    images[currentImage].classList.remove("active");
    currentImage = (currentImage + 1) % images.length;
    images[currentImage].classList.add("active");
  }, 2000);
}

在 HTML 页面中调用函数。

<body onload="getImages(); slideImages();">

PHP 后端脚本（获取图像 URL 列表）

使用 MySQLi 连接到数据库。
执行查询以获取图像 URL 列表。

将结果编码为 JSON 并返回。

<?php
// Database connection
$conn = new mysqli("localhost", "root", "", "database");

// Get images from database
$sql = "SELECT image_url FROM images";
$result = $conn->query($sql);

// Create JSON array
$images = array();
while ($row = $result->fetch_assoc()) {
  $images[] = $row;
}

// Encode to JSON and return
echo json_encode($images);
?>

CSS 样式

#carousel {
  display: flex;
  gap: 10px;
}

#carousel img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

#carousel img.active {
  border: 2px solid red;
}

完整 HTML 代码

<!DOCTYPE html>
<html>
<head>
  <title>Image Carousel</title>
  <link rel="stylesheet" href="style.css">
</head>
<body onload="getImages(); slideImages();">
  <div id="carousel"></div>

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

以上就是如何使用MySQL和JavaScript实现一个简单的图片轮播功能的详细内容，更多请关注编程学习网其它相关文章！