0

使用下面的 HTML，我需要创建一个 Javascript ONLY 脚本，以便在单击按钮后无限期地循环 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 让活动类正确移动

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;
})();

Demo here（点击“Render”运行）：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 );

Demo here（点击“Render”运行）：http: //jsbin.com/ohivex/edit#javascript,html

于 2012-06-29T14:02:24.190 回答