尝试使用前进和后退按钮创建图像幻灯片答案

【问题标题】：Trying to create image slideshow with forward and backward buttons尝试使用前进和后退按钮创建图像幻灯片
【发布时间】：2015-06-06 00:17:36
【问题描述】：

我自学了 Web 开发，因此一直在研究、反复试验。学习如何自己创建图像幻灯片很困难，需要一些帮助。

我首先从“文本幻灯片”开始，看看是否可以更改元素/值。下面的文字幻灯片：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
a{text-decoration: none; color: grey;}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

<table>
<tr>
<td><a href = "javascript:goBackward()"><</a></td>
<td><p id = "demo"><p></td>
<td><a href = "javascript:goFoward()">></a></td>
</tr>
</table>

<script>
var i = 0;
var arr = ["one","two","three","four"];
document.getElementById("demo").innerHTML = arr[i++];

function goFoward(){
if(i >= 0 && i < 4)
 {document.getElementById("demo").innerHTML = arr[i++];} 

}

function goBackward(){
if(i > 0)
 {document.getElementById("demo").innerHTML = arr[--i];}
}
</script>
</body>
</html>

我尝试将上面的代码应用于“图像幻灯片”，但无法正常工作。我需要帮助了解如何通过单击标签来更改图像。这是我的图像幻灯片代码：

<!DOCTYPE html>
<html>
<head>
<style>
.moveImg{text-decoration: none; color: black;}
</style>
</head>
<body>


<a href = "javascript:void(0)" onclick = "goBackward()" class =
"moveImg">&#60</a>
<img src = "klematis_small.jpg" alt = "faded reddish flower" id =
"myimages">
<a href = "javascript:void(0)" onclick = "goForward()" class =
"moveImg">&#62</a>

<script>
var img = new Image();
var images = new Array();

images[0] = "klematis_small.jpg";
images[1] = "klematis2_small.jpg";
images[2] = "klematis3_small.jpg";
images[3] = "klematis4_small.jpg";

var getImg = document.getElementById("myimages");

var i = 0;
for(i = 0;i < 4;i++){
img[i].src = images[i];
}

function goForward(){
if(i >= 0 && i <= 4){
getImg.innerHTML = img[i++];
}
}

function goBackward(){
if(i > 0){
getImg.innerHTML = img[i--];
}
}

</script>
</body>
</html>

【问题讨论】：

设置 JSFiddle 并对代码进行不良测试
你有不在函数内部的循环。可能是一个不错的起点。

标签： javascript html css image slideshow

【解决方案1】：

要更改图片源路径，不要更新innerHTML，需要更新src属性。

而不是：

document.getElementById("demo").innerHTML = arr[i++];

使用这个：

document.getElementById("demo").src = arr[i++];

此外，您需要在向前和向后转换函数中从 innerHTML 更改为 src。

【讨论】：

【解决方案2】：

我对您的代码进行了一些修改以进行整理，但保留了您的大部分代码。这不是执行此类操作的最佳方式，但我不会在这里介绍所有最佳实践。

这是 HTML：

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

<a href = "javascript:void(0)" class="moveImg" id="previous">&#60</a>
<div id = "myimages"><img src = "klematis_small.jpg" alt = "faded reddish flower" /></div>
<a href="javascript:void(0)" class="moveImg" id="next">&#62</a>

这里是javascript：

var images = [];

images[0] = {src: 'klematis1_small.jpg', alt: 'image 1 alt text'};
images[1] = {src: 'klematis2_small.jpg', alt: 'image 2 alt text'};
images[2] = {src: 'klematis3_small.jpg', alt: 'image 3 alt text'};
images[3] = {src: 'klematis4_small.jpg', alt: 'image 4 alt text'};

var getImg = document.getElementById("myimages");

var img = [];
var i = 0;
for(i = 0;i < 4;i++) {
    img[i] = '<img src="' + images[i].src + '" alt="' + images[i].alt + '" />';
}

var currentIndex = 0;
var goForward = function () {
    console.log('here' + currentIndex);
    if(currentIndex >= 0 && currentIndex < 3) {
        currentIndex++;
        getImg.innerHTML = img[currentIndex];
    }
};

var goBackward = function () {
    console.log('here' + currentIndex);
    if(currentIndex > 0){
        currentIndex--;
        getImg.innerHTML = img[currentIndex];
    }
};

document.getElementById('previous').onclick = goBackward;
document.getElementById('next').onclick = goForward;

这是一个有效的 jsfiddle： https://jsfiddle.net/e9s6djq9/3/

理想情况下，您应该像我在这里所做的那样将所有 onclick 事件处理移至 javascript。

我还使用以下方法创建了数组：

var images = [];

这被认为是比使用数组声明更好的做法：

var images = new Array();

这是一个改进的解决方案，因为您要求更好的编写 javascript 的方法。请记住，尽管这只是一瞥，实际上编写一个完整的滑块会花费大量时间，因此我建议您阅读最佳实践。这是比我上面发布的更好的版本。

https://jsfiddle.net/e9s6djq9/8/

【讨论】：

做这样的事情最好的方法是什么？
好吧，我很难选出一个最好的，但我可以推荐一些好的，这取决于你想要从图像滑块中得到什么。以下是我需要明确的几点：
对不起，我出去做一个 jsfiddle 忘了更新 - 这是我更新的评论
好吧，我很难选出一个最好的，但我可以推荐一些好的，这取决于你想要从图像滑块中得到什么。以下是我需要明确的几点： 1. 这个图像滑块是否会有 4 张静态图像，或者你想做一些花哨的事情，比如从后端获取图像，或者让用户上传图像。我知道这可能有点高级，但我们通常将图像滑块用于不同的目的。 2. 鉴于它在这种情况下是一组静态图像，我会选择组件模型。
这是一个改进版示例，我可以在短时间内完成：jsfiddle.net/e9s6djq9/8