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

最新推荐文章于 2022-07-10 08:45:00 发布

达芬奇怪物体

最新推荐文章于 2022-07-10 08:45:00 发布

阅读量490

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Fyn_Andersen/article/details/78446238

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

内容来源：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;
}