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

来源：互联网发布：js读取excel 编辑：程序博客网时间：2024/06/05 00:31

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

阅读全文

0 0