如何在網頁中的javascript中移動幻燈片

Question

我在javascript中使用以下代碼來移動幻燈片：

var slider = {


  el: {
    slider: $("#slider"),
    allSlides: $(".slide"),
    sliderNav: $(".slider-nav"),
    allNavButtons: $(".slider-nav > a")
  },

  timing: 300,
  slideWidth: 100% 


  init: function() {
    this.bindUIEvents();
  },

  bindUIEvents: function() {

    this.el.slider.on("scroll", function(event) {
      slider.moveSlidePosition(event);
    });

    this.el.sliderNav.on("click", "a", function(event) {
      slider.handleNavClick(event, this);
    });

  },

  moveSlidePosition: function(event) {
    // Magic Numbers =(
    this.el.allSlides.css({
      "background-position": $(event.target).scrollLeft()/6-100+ "px 0"
    });  
  },

  handleNavClick: function(event, el) {
    event.preventDefault();
    var position = $(el).attr("href").split("-").pop();

    this.el.slider.animate({
      scrollLeft: position * this.slideWidth
    }, this.timing);

    this.changeActiveNav(el);
  },

  changeActiveNav: function(el) {
    this.el.allNavButtons.removeClass("active");
    $(el).addClass("active");
  }

};

slider.init();

關於此，我在控制台中沒有收到任何錯誤，但是幻燈片應該每3秒自動移動一次，但現在不這樣做了。 有誰知道這是什么問題。 任何建議都將受到高度贊賞。

Answer 1

您遇到的語法問題中，百分比必須是字符串，並且后面要有逗號才能不破壞對象。

如果此行slideWidth: 100%是slideWidth: "100%" ,