0

以下のHTMLを使用して、ボタンをクリックすると4つの画像を無期限に循環させるJavascriptONLYスクリプトを作成する必要があります。私は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だけを使用してアクティブなクラスを正しく移動させる方法を理解することはできません

4

1 に答える 1

0

ここ。スライドショーを作りました。それがまさにあなたの望むものかどうかはわかりません。「開始」をクリックすると、画像が順番に表示されます。

(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

于 2012-06-29T14:02:24.190 に答える