JavaScript实现简单的循环式幻灯片

最新推荐文章于 2025-01-04 11:27:16 发布

原创最新推荐文章于 2025-01-04 11:27:16 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的HTML、CSS及JavaScript实现的图片轮播案例，包括前后切换按钮和图片资源的加载。通过此示例可以了解基本的网页布局、样式设置及简单的交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容来源：JavaScript基础教程第八版

HTML：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Image SlideShow</title>
	<link rel="stylesheet" type="text/css" href="SlideShow.css">
	<script type="text/javascript" src="SlideShow.js"></script>
</head>
<body>
	<div class="centered">
		<h1>This is Monster University</h1>
		<img src="images/MU1.jpg" id="myPic" width="960" height="540" alt="SlideShow">
		<h2><a href="previous.html" id="prelink"><< Previous</a>  <a href="next.html" id="nextlink">Next >></a></h2>
	</div>
</body>
</html>

CSS：

body {
	background-color: #FFF;
}

img {
	border-width: 0;
}

.centered {
	text-align: center;
}

JS：

window.onload = initLinks;

var pix = new Array("images/MU2.jpg", "images/MU3.jpg", "images/MU4.jpg", "images/MU5.jpg");
var thispix = 0;

function initLinks() {
	document.getElementById("prelink").onclick = processPrevious;
	document.getElementById("nextlink").onclick = processNext;
}

function processPrevious() {
	if(thispix == 0) {
		thispix = pix.length;
	}
	thispix--;
	document.getElementById("myPic").src = pix[thispix];
	return false;
}

function processNext() {
	thispix++;
	if(thispix == pix.length) {
		thispix = 0;
	}
	//thispix++;
	document.getElementById("myPic").src = pix[thispix];
	return false;
}