图像不会在javascript幻灯片中显示
图像不会在javascript幻灯片中显示
提问于 2013-12-31 05:25:29
图像不会在javascript幻灯片中显示，我已经在这上面工作了三天，我对此感到厌烦。我甚至开始作弊，只是复制我在网上看到的其他滑块(开源)并使用它们。这是工作用的，请帮帮我。
<div id="slideshow" style="width:960px;height:500px;overflow:hidden;">
<div id="slideshowimage" style="width:960px;height:500px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:960px;height:500px;overflow:hidden;">
<a onClick="alterimage(-1);">Prev</a>
<a onClick="alterimage(1);">Next</a>
</div>
</div>
<script type="text/javascript">
var images = new Array;
images[1] = "Images/image1.jpg";
images[2] = "Images/image2.jpg";
images[3] = "Images/image3.jpg";
var presentimage = 1;
function alterimage(alter){
presentimage += alter;
document.getElement('slideshow').innerHTML = presentimage;
}
alterimage(0);
</script>回答 3
Stack Overflow用户
发布于 2013-12-31 05:28:39
没有getElement这样的函数，应该是getElementById
document.getElementById('slideshow').innerHTML = presentimage;Stack Overflow用户
发布于 2013-12-31 05:31:22
就快到了..。
我在你的代码中发现了一些东西，我已经修复了它们：
- 没有
document.getElement，但是如果没有图片document.getElementById('id') - You就不会有幻灯片，所以我添加了
<img>标签。 - 使用CSS类来设置样式，而不是内联样式，它更具可读性，也更易于维护。
这是我最新的提琴：http://jsfiddle.net/robertp/jWLZz/10/
我不得不对代码做了相当大的改动，以使其工作-并使其更容易阅读：
- 我更改了DOM，删除了内联CSS并通过类添加了样式
- 我添加了
<img>标记，这样您就可以拥有图像，而不仅仅是它们的名称 - 我为两个
<a>标记都添加了适当的JavaScript事件处理程序
<代码>H121我更新了JavaScript函数，所以现在只要您单击上一个或下一个链接，它就会交换图像标记的图像源。<代码>H222<代码>F223
作为建议，我不会从索引1开始填充数组，而是从0开始填充，以跟上数组在JavaScript中的工作方式。
我还在下面的答案中添加了代码，我希望这一切都有意义。
更新的HTML：
<div id="slideshow" class="slideshow">
<img id="slideshowimage"/>
<div id="slideshowcontrols" class="slideshow">
<a href='#' class='prev-link'>Prev</a>
<a href='#' class='next-link'>Next</a>
</div>
</div>更新的JavaScript：
var images = new Array;
images[0] = "http://placekitten.com/200/100";
images[1] = "http://placekitten.com/300/200";
images[2] = "http://placekitten.com/200/200";
var presentimage = 0;
document.getElementsByClassName('next-link')[0].addEventListener('click', function() {
alterimage(1);
});
document.getElementsByClassName('prev-link')[0].addEventListener('click', function() {
alterimage(-1);
});
var alterimage = function alterimage(alter){
presentimage += alter;
document.getElementById('slideshowimage').setAttribute('src', images[presentimage]);
}
alterimage(0);Stack Overflow用户
发布于 2013-12-31 05:47:39
目前您没有访问存储在数组中的图像，您只需将幻灯片div的innerHTML设置为您的计数器即可。我在幻灯片显示图像div中添加了一个空的img标签。然后，当您通过alterimage函数传递和数组索引时，img标记src属性被设置为数组中相应的图像url。
<div id="slideshow" style="width:960px;height:500px;overflow:hidden;">
<div id="slideshowimage" style="width:960px;height:500px;overflow:hidden;">
<img src=""/>
</div>
<div id="slideshowcontrols" style="width:960px;height:500px;overflow:hidden;">
<a onClick="alterimage(-1);">Prev</a>
<a onClick="alterimage(1);">Next</a>
</div>
</div>
<script type="text/javascript">
var images = new Array;
images[0] = "https://www.google.com/images/srpr/logo9w.png";
images[1] = "https://www.google.com/images/srpr/logo10w.png";
images[2] = "https://www.google.com/images/srpr/logo11w.png";
var presentimage = 0;
function alterimage(alter){
presentimage += alter;
document.getElementById('slideshowimage').childNodes[1].setAttribute('src',
images[presentimage]);
}
alterimage(2);
</script>JSFiddle: http://jsfiddle.net/Lrrpu/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20847828
复制相关文章
相似问题
腾讯云开发者
