Javascript只有沒有JQUERY幻燈片一個DIV .Active類

Question

隨着下面的HTML我需要創建一個Javascript只有腳本來無限期地循環4個圖像，一旦你點擊一個按鈕。我通過jQuery解決了這個問題，但是想用Javascript解決這個問題，以便真正學習基礎知識，但是我似乎無法讓它做任何事情，除了擺脫起始畫面並留在一個空白的div上。

<div id='challengeTwoImageJavascript' class='sectionChallengeCarouselImage'> 
    <img id='imgj1' imgn='1' class='carouselImage carouselImageJavascriptActive' src='img/image1.jpg'/> 
    <img id='imgj2' imgn='2' class='carouselImage' src='img/image2.jpg'/> 
    <img id='imgj3' imgn='3' class='carouselImage' src='img/image3.jpg'/> 
    <img id='imgj4' imgn='4'class='carouselImage' src='img/image4.jpg'/> 
</div> 

JS

var img = document.getElementByClassName('carouselImageJavascriptActive'); 
document['#challengeTwoImageJavascript'].src = searchPic.src; = myImage[x]; 
x++; 
var myImage = new Array(); 
var x=0; 

myImage[0]='img/image1.jpg'; 
myImage[1]='img/image2.jpg'; 
myImage[2]='img/image3.jpg'; 
myImage[3]='img/image4.jpg';   

那是什麼林與目前的工作。不能弄清楚如何讓主動類正確地移動使用只是javascript

Answer 1

在這裏。我做了幻燈片。我不知道這是否正是你想要的。當你點擊「開始」時，轉到通過圖像依次是：這裏

(function() { 

    var images = [ 
    'http://bit.ly/sbK2Ub', 
    'http://bit.ly/yYi5oQ', 
    'http://bit.ly/4GjHJn', 
    'http://bit.ly/xgpWlQ', 
    'http://bit.ly/pFjGed' 
    ]; 
    var i = 0, 
     img = document.createElement('img'); 
    function foward() { 
    if (images[i] && images[i + 1]) { 
     img.src = images[i]; 
     document.body.appendChild(img); 
     i++; 
    } 
    } 
    document.getElementById('myButton')[0].onclick = foward; 
})(); 

演示（點擊「渲染」運行）：http://jsbin.com/urixax/edit#javascript,html

這裏有一個我最近做了。我可以回去和前瞻性的影像：這裏

(function(window, document, undefined) { 
    var Main = { 
     images: [], 
     idx: -1, 

     fillArray: function(arr) { 
      var img = new Image(), 
       load = function(a) { 
        for (var i = 0; i < a.length; i++) { 
         img.src = a[i]; 
        } 
       }; 

      if (typeof arr === "object") { 
       if (arr.length) { 
        load(arr); 
        Main.images = Main.images.concat(arr); 
       } else Main.images.push(arr); 
      } else { 
       if (arguments.length) { 
        load(arguments); 
        for (var i = 0; i < arguments.length; i++) { 
         Main.images.push(arguments[i]); 
        } 
       } else return; 
      } 
     }, 
     changeImage: function(el, n) { 
      if (n < 0) { 
       if (Main.images[Main.idx - 1]) { 
        Main.idx -= -n; 
        el.src = Main.images[Main.idx]; 
       } 
      } else { 
       if (Main.images[Main.idx + 1]) { 
        Main.idx += n; 
        el.src = Main.images[Main.idx]; 
       } 
      } 
     } 
    }; 

    var a = [ 
     'http://bit.ly/sbK2Ub', 
     'http://bit.ly/yYi5oQ', 
     'http://bit.ly/4GjHJn', 
     'http://bit.ly/xgpWlQ', 
     'http://bit.ly/pFjGed' 
    ]; 

    var b = document.getElementById('back'), 
     n = document.getElementById('next'), 
     c = document.getElementById('image'); 

    Main.fillArray(a); 

    n.onclick = b.onclick = function() { 
     Main.changeImage(c, this.id === "next" ? 1 : -1); 
    }; 
})(this, this.document); 

演示（點擊「渲染」運行）：http://jsbin.com/ohivex/edit#javascript,html