如何在网页中的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%" ,