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函数，所以现在当你点击上一个或下一个链接时它会交换图像标记的图像源。

正如一个建议，我不会从索引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

目前您无法访问阵列中存储的图片，只需将幻灯片innerHTML的{{1}}设置为您的计数器即可。我在幻灯片图片div中添加了一个空的img标记。然后，当您通过div函数传递和数组索引时，该src标记的img属性将设置为数组中的相应图像URL。

alterimage

JSFiddle： http://jsfiddle.net/Lrrpu/

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

3 个答案: