Question

我是全新的，所以我道歉，因为我确定一个中间人可以从已经被问过的问题中得出他或她的答案，但我需要特别的帮助。

我无法获得我的＆＃34;下一个＆＃34;和＆＃34;之前＆＃34;我的幻灯片的按钮在Javascript中工作。一旦用户点击了所有5张图片，它就需要返回第一张图片，准备再次点击 - 连续循环。我认为阵列应该被利用。我错过了什么？

谢谢!!

＆＃13;

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() {
    
   
    
}

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您有以下变量：

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

大概 imageItem 是当前显示图像的索引（例如，第一个图像为0），图像是图像数量（即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。

由您来填写其余代码。： - ）

Answer 2

我会使用数组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];
    };
}

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

＆＃13;

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];
    };
}

＆＃13;

#color {
    height: 100px;
    width: 100px;
}

＆＃13;

<div id="color"></div>
<button id="next">Next</button>
<button id="prev">Prev</button>

＆＃13;

希望有所帮助。

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

2 个答案: