javascript实现循环幻灯片

最新推荐文章于 2025-06-03 15:10:05 发布

刘老shi

最新推荐文章于 2025-06-03 15:10:05 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html web

本文链接：https://blog.youkuaiyun.com/fighterna/article/details/53096691

本文介绍了如何使用JavaScript来创建一个循环的幻灯片展示。通过HTML基础结构和两个核心函数processPrevious与processNext，实现了用户可以向前或向后浏览幻灯片的功能。关键在于确保幻灯片在到达末尾时能够无缝循环回开头。

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

Web站点上的幻灯片每次向用户显示一个图像，并且让用户能够控制显示图像的进度（既可以向前，也可以向后）。javascript向用户提供所需的交互控制能力。脚本1显示了必须的HTML，脚本2显示了在页面上添加幻灯片所需的javascript。
脚本1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Slideshow</title>
    <script type="text/javascript" src="script09.js"></script>  
</head>
<body bgcolor="#FFFFFF">
    <div align="center">
        <h1>Welcome, Robot Overlords!</h1>
        <img src="images/robot1.jpg" id="myPicture" width="200" height="400" alt="Slideshow" />
        <h2><a href="previous.html" id="prevLink">&lt;&lt; Previous</a>&nbsp;&nbsp;<a href="next.html" id="nextLink">Next &gt;&gt;</a></h2>
    </div>
</body>
</html>

脚本2：

window.onload = initLinks;

var myPix = new Array("images/robot1.jpg","images/robot2.jpg","images/robot3.jpg");
var thisPic = 0;

function initLinks() {
    document.getElementById("prevLink").onclick = processPrevious;
    document.getElementById("nextLink").onclick = processNext;
}

function processPrevious() {
    if (thisPic == 0) {
        thisPic = myPix.length;
    }
    thisPic--;
    document.getElementById("myPicture").src = myPix[thisPic];
    return false;
}

function processNext() {
    thisPic++;
    if (thisPic == myPix.length) {
        thisPic = 0;
    }
    document.getElementById("myPicture").src = myPix[thisPic];
    return false;
}