Слайд-шоу в JavaScript

Question

Я делаю изображение слайд-шоу в JavaScript:

функция ImageLoop (изображения, скорость, ширина, высота, вкл.) {

  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 работает нормально, но на других у меня проблема. Например, когда я устанавливаю индекс на другое число и запускаю его, т. Е. Работаю, но на другом он начинается с индекса 0. Я не знаю, в чем проблема. Может ли кто-нибудь помочь мне с этим?

Answer 1

Я не знаю вашей цели в том, что вы делаете. Но если вам просто нужна эта функциональность (слайд-шоу изображений), рассмотрите возможность использования существующей библиотеки javascript и решения.

Для JQuery Это может быть:

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

Answer 2

Лучший подход к созданию кода JS, который совместим со всеми довольно современными браузерами (начиная с IE6 и Firefox2), - это использовать библиотеку javascript, которая позаботится об этом за вас. jQuery - это отличная библиотека, в которой есть много плагинов, включая слайд-шоу и т. д. Более подробную информацию вы можете найти в текст ссылки и кучу замечательных примеров функций пользовательского интерфейса, таких как слайд-шоу в текст ссылки всего наилучшего, Юваль

Answer 3

Мне очень нравится Lytebox . Он имеет функцию слайд-шоу, которую вы хотите (как и другие) и очень прост в использовании. Это также работает в IE6 и т. Д.