javascript中的幻灯片答案

【问题标题】：Slidesshow in javascriptjavascript中的幻灯片
【发布时间】：2009-06-05 12:33:56
【问题描述】：

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

function 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 开始。我不知道它有什么问题。有人可以帮我吗？

【问题讨论】：

如果您可以发布您所拥有内容的在线版本，这会很有帮助。由于它是 Javascript，任何人都可以通过在线检查它并查看它的工作来帮助您。

标签： php javascript

【解决方案1】：

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

jQuery 可以是：

【讨论】：

【解决方案2】：

我真的很喜欢Lytebox。它具有您想要的幻灯片功能（以及其他功能）并且非常易于使用。它也适用于IE6等。

【讨论】：

【解决方案3】：

创建与所有现代浏览器（从 IE6 和 Firefox2 开始）兼容的 JS 代码的最佳方法是使用为您处理这些事情的 javascript 库。 jQuery 是一个优秀的库，其中包含许多插件，包括幻灯片等...您可以在 link text 找到更多信息，以及在 link text 找到大量 UI 功能的出色示例，例如幻灯片一切顺利，尤瓦尔

【讨论】：