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