圖片不會以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/