php - JavaScript 中的幻灯片

Question

我正在用 javascript 制作幻灯片图像:

函数 ImageLoop( 图像、速度、宽度、高度、inc){

  this.img = images;
  this.speed = speed;
  this.width = width;
  this.height = height;
  this.interval = false;
  this.play = false;
  if (inc > this.img.length-1){
      this.index = this.img.length-1;
  } else {
     this.index = inc;
  }
  this.returned = false;

  function preloadImages(){
     for (i in this.img){
         var _i = new Image();
         i.src = this.img[i];
     }
  }

  preloadImages();

  thisObj = this;
  function onInterval( ){
     thisObj.next();
  }

  function set(index) {
     var im = document.getElementById("imageloop");
     if (index > this.img.length-1){
        var idx = this.img.length-1;
     } else {
        var idx = index;
     }
     im.src = this.img[idx];
  }

  function next( ){
     if (this.play){
        if (next == this.img.length-1){
            this.returned = false;
        }
        if ((this.index == this.img.length-1) && !this.returned){
           this.returned = true;
           return;
        }
        var next = (this.index < this.img.length-1) ? ++this.index : 0;
        this.set(next);
     }
  }

  function start( ){
     this.play = true;
     if (!this.interval){
        this.interval = setInterval(onInterval, this.speed);
     }
  }

  function stop( ){
     this.play = false;
     if (this.interval){
        clearInterval(this.interval);
        this.interval = false;
     }
  }

  function changeSpeed( adjust ){
     this.speed += adjust;
     clearInterval(this.interval);
     this.interval = setInterval(onInterval, this.speed);
  }

  function serendre( place ) {
     switch (place){
        case "beginning":
                         this.stop();
                         this.set(0);
                         break;
        case "left":
                    this.stop();
                    var next = (this.index > 0) ? --this.index : this.img.length-1;
                    this.set(next);
                    break;
        case "right":
                     this.stop();
                     var next = (this.index < this.img.length-1) ? ++this.index : 0;
                     this.set(next);
                     break;
        case "end":
                   this.stop();
                   this.set(this.img.length-1);
                   break;
     }
  }

  // Setup
  var d = document.getElementById("il");
  var image = "<img src='" + this.img[this.index] + "' id='imageloop' width='" + this.width + "' height='" + this.height + "' />";
  d.innerHTML = image;

  // Add Functions
  this.preloadImages = preloadImages;
  this.set = set;
  this.next = next;
  this.start = start;
  this.stop = stop;
  this.changeSpeed = changeSpeed;
  this.serendre = serendre;

}

在 IE 中工作正常，但在其他方面我遇到问题。就像当我将索引设置为其他数字并在 Ie 中启动它时，它从索引 0 开始。我不知道它有什么问题。有人可以帮我吗？

Answer 1

我不知道你正在做的事情的目标。但如果您只需要该功能(图像幻灯片)，请考虑使用现有的 javascript 库和解决方案。

对于jQuery它可以是:

• http://sorgalla.com/projects/jcarousel/
• http://gmarwaha.com/jquery/jcarousellite/
• http://thomlx.free.fr/jquery/jquery_carousel.htm