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

我已经用javascript创建了一个“prev/next”幻灯片，现在我想在“prev/next”按钮旁边添加一个计数器（1/10、2/10、3/10…），但似乎没有任何效果

这是我第一次尝试创建网站，我对jQuery一无所知，所以如果可能的话，请坚持使用html+javascript。这是我的剧本

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

var numberOfImg=2

function previousImage(){
  if(imgNumber>1){
     imgNumber--
  }

  else{
    imgNumber = numberOfImg
    }

  document.slideImage.src = image[imgNumber-1]
}

function nextImage(){
  if(imgNumber < numberOfImg){
  imgNumber++
  }

  else{
    imgNumber = 1
    }

  document.slideImage.src = image[imgNumber-1]
    }

if(document.images){
   var image1 = new Image()
   image1.src = "http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg"
   var image2 = new Image()
   image2.src = "http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg"
   }

var image=新数组(
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg", 
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg")
var imgNumber=1
变量numberOfImg=2
函数previousImage（）{
如果（imgNumber>1）{
imgNumber--
}
否则{
imgNumber=numberOfImg
}
document.slideImage.src=图像[imgNumber-1]
}
函数nextImage（）{
如果（imgNumber

脚本+html：

---

（上一个/下一个按钮似乎不起作用——当我将它们从笔记本电脑启动到浏览器时，它们工作得很好。）

您可以使用一些现有的javascript图像滑块，例如，对于您当前的代码，您可以这样做，添加一个元素，如

span

，以保持计数，您可以添加一个函数，如：

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

---

并在您的

previousImage（）

和

nextImage（）

函数中调用它，就像在这个演示中一样

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

首先，请注意您的代码： 下面是我的exampe插件：

---

如果下面的答案有帮助，请单击最佳答案旁边的“接受”复选标记？

//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;
  }
};