向上一个/下一个图像幻灯片添加计数器(仅限javascript/css）

对于当前代码，您可以使用一些现有的javascript图像滑块，例如sliderman滑块，您可以添加span这样的元素来保存计数，还可以添加这样的函数

function changeCounter(cur, total) {
    document.getElementById("counter").innerHTML = cur + "/" + total;
}

并在previousImage()和nextImage()函数中调用它，如本演示jsfiddle

有许多纯css幻灯片非常漂亮，可以做出令人印象深刻的事情。然而，当你试图支持旧的浏览器时，纯css幻灯片会变得越来越不令人印象深刻，甚至不可能。JavaScript是最灵活、最强大的方法。也就是说，我想帮你清理你的代码。我只有几分钟的时间，所以这是一个快速组装的插件，但它应该会让你走上正轨。

首先，请注意您的代码：

//you're missing semicolons everywhere. ";"
/* "var image" is very unclear.
 * it's an array, so it should be plural "images"
 * there aren't images in this array - it's image urls or sources
 * instead of "new Array" you could just use "[]"
 */
var image = new Array(
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg", 
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg")
var imgNumber=1 //the name doesn't mean anything. I have to assume that you mean "currentImgNumber" or something to that effect
var numberOfImg=2 //this could be determined by checking the length of your array -  myArray.length

下面是我的示例插件：

现场演示（点击）。

/***** This section is how you use the plugin. I start writing with the usage and then I make it mean something *****/
window.onload = function() { //when the page is loaded
  var fooElem = document.getElementById('foo'); //get an element where we will attach the plugin
  var foo = Object.create(slideshow); //create a new slideshow object
  foo.create({ //create a slideshow with the given options
    element: fooElem, //the element where the slideshow will be
    sources: [ //image urls
      "http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg",
      "http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg"  
    ]
  });
  //we can make more of these and with different options
  var barElem = document.getElementById('bar');
  var bar = Object.create(slideshow);
  bar.create({
    element: barElem,
    sources: [
      "http://eggboss.com/wp-content/uploads/2013/09/The-Gentleman-233x300.png",
      "http://fc07.deviantart.net/fs71/f/2013/040/8/a/profile_picture_by_classy_like_a_sir-d5uf426.jpg"  
    ]
  });
};

/**** now let's create the plugin and make it work as it is used above *****/
var slideshow = {
  currentIndex: 0,
  imgs: [],
  create: function(options) {
    options.element.className+= ' slideshow'; //add a class to the main element for styling
    this.imgs = this.getImgs(options.sources); //make img html
    var controls = this.getControls(); //make controls
    //add the html to the element from the options
    var frag = document.createDocumentFragment();
    this.imgs.forEach(function(img) {
      frag.appendChild(img);
    });
    frag.appendChild(controls);
    options.element.appendChild(frag);
  },
  getImgs: function(sources) {
    var imgs = [];
    sources.forEach(function(src, i) {
      var img = document.createElement('img');
      img.src = src;
      imgs.push(img);
      if (i > 0) {
        img.style.display = 'none'; //hide all but first image
      }
    });
    return imgs;
  },
  getControls: function() {
    var that = this; //so that we can access "this" within the click functions
    var controls = document.createElement('div');
    controls.className = 'controls';
    var counter = document.createElement('span');
    counter.className = 'counter';
    this.setCounter(counter);
    var prev = document.createElement('a');
    prev.textContent = 'Prev';
    prev.className = 'prev';
    prev.addEventListener('click', function() {
      newIndex = (that.currentIndex) ? that.currentIndex-1 : that.imgs.length-1;
      that.changeImg(newIndex, counter);
    });
    var next = document.createElement('a');
    next.textContent = 'Next';
    next.className = 'next';
    next.addEventListener('click', function() {
      newIndex = (that.currentIndex !== that.imgs.length-1) ? that.currentIndex+1 : 0;
      that.changeImg(newIndex, counter);
    });
    controls.appendChild(prev);
    controls.appendChild(next);
    controls.appendChild(counter);
    return controls;
  },
  changeImg: function(newIndex, counter) {
    this.imgs[this.currentIndex].style.display = 'none';
    this.imgs[newIndex].style.display = 'inline';
    this.currentIndex = newIndex;
    this.setCounter(counter);
  },
  setCounter: function(counter) {
    counter.textContent = (this.currentIndex+1)+' / '+this.imgs.length;
  }
};