图片不会以javascript幻灯片形式显示

Question

图片不会出现在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>

Answer 1

没有像getElement这样的函数，它应该是getElementById ：

document.getElementById('slideshow').innerHTML = presentimage;

Answer 2

快好了...

我在你的代码中找到了一些东西，我修复了它们：

• 没有document.getElement但是document.getElementById('id')
• 你没有没有图像的幻灯片，所以我添加了<img>标签。
• 使用CSS类进行样式设计而不是内联样式，它更易读，更易于维护。

这是我更新的小提琴： http ： //jsfiddle.net/robertp/jWLZz/10/

我不得不改变代码以使其工作 - 并使其更容易阅读：

• 我通过删除内联CSS并通过类添加样式来更改DOM
• 我添加了<img>标签，以便您可以拥有图像而不仅仅是名称
• 我为<a>标签添加了适当的JavaScript事件处理程序
• 我更新了JavaScript函数，所以现在它在您单击上一个或下一个链接后交换图像标记的图像源。

作为一个建议，我不会开始从索引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);

Answer 3

目前您没有访问存储在数组中的图像，只需将幻灯片div的innerHTML设置为您的计数器即可。 我在slideshowimage 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/