Javascript - 幻灯片放映上的下一个/上一个按钮

Javascript - 幻灯片放映上的下一个/上一个按钮 - 新 child 需要帮助

转载作者：行者123 更新时间：2023-11-30 17:14:24

我在这方面是全新的，所以我很抱歉，因为我确信中间人可以从已经被问到的问题中得出他或她的答案，但我需要具体的帮助。

我无法让幻灯片放映的“下一个”和“上一个”按钮在 Javascript 中正常工作。一旦用户点击了所有 5 张图片，它需要返回到第一张图片，准备再次点击——一个连续的循环。我认为应该使用数组。我错过了什么？

谢谢!!

var imageCache = [];  
var imageItem = 0;    
var images = 0;       

var captionNode;
var imageNode;

var $ = function (id) { 
	return document.getElementById(id); 
}

window.onload = function () {
    
    var listNode = $("image_list");  
    var nextButton = $("next");
    var previousButton = $("previous");
   
    captionNode = $("caption");
    imageNode = $("image");

    var links = listNode.getElementsByTagName("a");
    
   
    var i, linkNode, image;
    for ( i = 0; i < links.length; i++ ) {
        linkNode = links[i];
        
        // Pre-load image and copy title properties.
        image = new Image();
        image.src = linkNode.getAttribute("href");
        image.title = linkNode.getAttribute("title");
        imageCache.push(image);
    }
    // Now record the total images we have.
    images = imageCache.length;
    
    // Set up the button handlers.
    nextButton.onclick = nextButtonClick;
    previousButton.onclick = previousButtonClick;
}


    
function nextButtonClick() {
	

   
   
  
}

function previousButtonClick() {
    
   
    
}

article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    width: 380px;
    margin: 0 auto;
    padding: 20px;
    border: 3px solid blue;
}
h1, h2, ul, p {
	margin: 0;
	padding: 0;
}
h1 {
	padding-bottom: .25em;
	color: blue;
}
h2 {
	font-size: 120%;
	padding: .5em 0;
}
ul { 
	display: none;
}
img {
	height: 250px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <title>Slide Show</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="slide_show.js"></script>
</head>

<body>
<section>
    <h1>Fishing Slide Show</h1>
    <ul id="image_list">
        <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li>
        <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li>
        <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li>
        <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li>
        <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li>
    </ul>
    <h2 id="caption">Casting on the Upper Kings</h2>
    <p>
    	<img src="images/casting1.jpg" alt="" id="image">
    </p>
    <input type="button" value="Previous" name="previous" id="previous">
    <input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>

最佳答案

您有以下变量:

var imageCache = [];  
var imageItem = 0;    
var images = 0;

大概 imageItem 是当前显示的图像的索引(例如，第一个为 0)，images 是图像的数量(即 imageCache.length )。获取下一张图片:

imageItem     = ++imageItem % images;
var nextImage = imageCache[imageItem];

当 imageItem 达到缓存中的图像数量时，这将返回到零。同样对于以前的:

imageItem     = (--imageItem + images) % images;
var prevImage = imageCache[imageItem];

因此当 imageItem 达到 0 时，减去 1 变为 -1 并添加 imageCache.length 将其设置为最后一张图像。其余时间它留在 imageItem - 1。

剩下的代码由您来填写。 :-)

关于Javascript - 幻灯片放映上的下一个/上一个按钮 - 新 child 需要帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26395013/

文章推荐： c - C中的双向匿名管道

文章推荐： c# - 如何在 Entity Framework 中获取表的架构名称？

文章推荐： c - 用 c 编写基本 shell 时使用信号处理程序时出现段错误

文章推荐： c# - asp.net gridview 中的分页和排序问题

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript - 幻灯片放映上的下一个/上一个按钮 - 新 child 需要帮助