Question

我自己学习了网络开发，所以它一直是研究，试验和错误。学习如何自己创建图像幻灯片一直很困难，需要一些帮助。

我开始使用＆＃34;文字幻灯片＆＃34;首先看看我是否可以获得要更改的元素/值。下面的文字幻灯片：

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

我已经尝试将上面的代码应用到＆＃34;图片幻灯片＆＃34;但是无法让它发挥作用。我需要帮助了解如何通过点击标签来更改图像。这是我的图像幻灯片代码：

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

Answer 1

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

而不是：

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

使用此：

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

此外，您需要在前向和后向过渡功能中从innerHTML更改为src。

Answer 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/

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

2 个答案: