Javascript-幻灯片上的下一个/上一个按钮-新孩子需要帮助

Javascript - next/previous buttons on slide show - New kid needs assistance

本文关键字：孩子 帮助 新孩子 幻灯片 下一个 按钮 上一个 Javascript-      更新时间：2023-09-26

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

我很难让我的幻灯片的"下一个"answers"上一个"按钮在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。

剩下的代码由您填写。：-）

我将使用数组zipper来实现next和prev函数。数组拉链是一种数据结构，允许您在数组中前后移动。

function ArrayZipper(array) {
    var length = array.length, index = 0;
    this.getCurrent = function () {
        return array[index];
    };
    this.getNext = function () {
        return array[index = (index + 1) % length];
    };
    this.getPrevious = function () {
        return array[index = (length + index - 1) % length];
    };
}

您可以使用阵列拉链创建幻灯片，如下所示：

var zipper = new ArrayZipper([ "black"
                             , "blue"
                             , "green"
                             , "cyan"
                             , "red"
                             , "magenta"
                             , "yellow"
                             , "white"
                            ]);
var style = $("color").style;
style.backgroundColor = zipper.getCurrent();
$("next").addEventListener("click", function () {
    style.backgroundColor = zipper.getNext();
});
$("prev").addEventListener("click", function () {
    style.backgroundColor = zipper.getPrevious();
});
function $(id) {
    return document.getElementById(id);
}
function ArrayZipper(array) {
    var length = array.length, index = 0;
    this.getCurrent = function () {
        return array[index];
    };
    this.getNext = function () {
        return array[index = (index + 1) % length];
    };
    this.getPrevious = function () {
        return array[index = (length + index - 1) % length];
    };
}
#color {
    height: 100px;
    width: 100px;
}
<div id="color"></div>
<button id="next">Next</button>
<button id="prev">Prev</button>

希望能有所帮助。

相关文章：