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

Question

我使用 javascript 创建了一个“上一个/下一个”幻灯片，现在我想在“上一个/下一个”按钮旁边添加一个计数器（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"
   }

脚本+html：http://jsfiddle.net/nLHY9/5/

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

Answer 1

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

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

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

Answer 2

有许多漂亮的纯 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

这是我的示例插件：

Live demo here (click).

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