【新手笔记】Javascript实现图片自动轮播（含html、css源码）

最新推荐文章于 2025-04-14 09:10:51 发布

Zhongwenmingzi_0

最新推荐文章于 2025-04-14 09:10:51 发布

阅读量543

点赞数 4

文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/Zhongwenmingzi_0/article/details/138805363

版权

APP程序开发作业分享：

做一个如下图所示的“图片切换”js项目，一共三张图片；左、右两个按钮分别用于向左或者向右循环切换这三张图片；如果超过3秒，用户都没有按下其中任何一个按钮，则自动向右切换图片；循环上述过程。

首先，准备好三张图片放在img文件夹中。个人习惯把css、js和html分离，所以各建了一个文件，参考下图。

Part1 HTML部分

创建容器来存放图片和按钮，并链接css和js。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Image Slider</title>
		
	</head>
	<body>
		<div class="sliderContainer">
		  <img id="sliderImage" class="sliderImage" src="img/liJiang.JPG" alt="Slider Image">
			<div class="buttonContainer">
			    <button id="sliderButtonLeft" class="sliderButton">向左切换图片</button>
			    <button id="sliderButtonRight" class="sliderButton">向右切换图片</button>
			  </div>
		</div>
		
		<script src="js/slider.js"></script>
		
	</body>
</html>

Part2 CSS部分

调整布局，使幻灯片在网页中居中；简单设置一下样式和颜色。

 body {
    background-color: #f0f0f0; /* 给网页添加背景色 */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  .sliderContainer {
    position: relative;
    width: 400px; /* 设置容器宽度 */
    text-align: center;
    background-color: #ffffff; /* 给容器添加背景色 */
    padding: 20px;
    border-radius: 8px; /* 给容器添加圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
  .sliderImage {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 8px; /* 给图片添加圆角 */
	margin-bottom: 10px;
  }
  .buttonContainer {
      display: flex; /* 使用flexbox布局 */
      justify-content: space-between; /* 使按钮在容器中均匀分布 */
    }
  .sliderButton {
    font-size: 20px;
    color: white;
    background-color: teal;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px; /* 给按钮添加圆角 */
	flex: 1; /* 使按钮在容器中均匀分布 */
	margin: 0 18px;/* 添加左右边距以分隔按钮 */
	transition: background-color 0.3s ease; /* 添加平滑的背景色过渡效果 */
  }

  .sliderButton:hover {
    background-color: palevioletred;

Part3 Javascript部分

let images = ['img/liJiang.JPG', 'img/qingXiuShan.JPG', 'img/weiZhou.JPG'];//轮播图片的数组
let currentImageIndex = 0;//跟踪当前显示图片的索引
let timeoutId;//定时器

//函数：按指定方向更改当前显示的图片
function changeImage(direction) {
  clearTimeout(timeoutId); // 清除任何先前的定时器

  if (direction === 'left') {
    currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
  } else if (direction === 'right') {
    currentImageIndex = (currentImageIndex + 1) % images.length;
  }
  
//将图片元素的src属性设置为新的图片URL
  document.getElementById('sliderImage').src = images[currentImageIndex];

//设置新的定时器
  timeoutId = setTimeout(function() {
    changeImage('right');
  }, 3000);
}

//监听左侧按钮的点击事件，并调用changeImage函数切换到上一张图片
document.getElementById('sliderButtonLeft').addEventListener('click', function() {
  changeImage('left');
});

//监听右侧按钮的点击事件，并调用changeImage函数切换到下一张图片
document.getElementById('sliderButtonRight').addEventListener('click', function() {
  changeImage('right');
});

// Initial timeout：页面加载后3秒后自动调用changeImage函数切换到下一张图片
timeoutId = setTimeout(function() {
  changeImage('right');
}, 3000);

使用setTimeout函数来实现图片的自动切换。setTimeout函数接受两个参数：一个函数和一个时间（以毫秒为单位）。该函数在指定的时间后执行一次,使用它来在3秒后自动切换到下一张图片。

使用模运算（%）来循环遍历images数组。当currentImageIndex达到数组的长度时，模运算会将其重置为0，从而实现循环轮播。