javascript - 为什么幻灯片无法在服务器上播放但可以离线播放

Question

我的问题是，当我在浏览器(离线)中打开index.html时，图像 slider 效果很好。但是当我尝试在服务器上打开它时(实际上需要很长时间才能加载超过 5mb 的图像)，它不会滑动。您可以尝试单击右上角的白点，但什么也没有发生。感谢您的任何建议。

代码是

<!-- BEGIN - SlideShow -->
<div class="ImageSlider">
    <div class="ImageSlider-scroller">
        <ul class="ImageSlider-items">
            <li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/1.jpg);"></li>
            <li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/2.jpg);"></li>
            <li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/3.jpg);"></li>
        </ul>
            <nav class="ImageSlider-indicators">
                <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
                <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
                <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
            </nav>
    </div>
</div>
<!-- END - SlideShow -->

/* Image Slider */
.ImageSlider {
  display: flex;
  align-items: stretch;
  height: 50%;
}

.ImageSlider-button {
  width: 40px;
  border: none;
  background: transparent;
  color: #000000;
  font-size: 40px;
  text-align: center;
  outline: none;
  opacity: 0.5;
  transition: opacity 300ms ease-out;
}

.ImageSlider-button:hover {
  opacity: 1;
}

.ImageSlider-scroller {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ImageSlider-items {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
}

.ImageSlider-item {
  display: inline-block;
  padding-bottom: 31.25%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
}

.ImageSlider-indicators {
  list-style: none;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  text-align: right;
  padding: 40px 140px;
  font-size: 0;
}

.ImageSlider-indicator {
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
  font-weight: bold;
  border: 2px solid #FFFFFF;
  width: 14px;
  height: 14px;
  border-radius: 16px;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.4s ease-in-out;
}

.ImageSlider-indicator:hover,
.ImageSlider-indicator--is-active {
  background-color: #FFFFFF;
}

还有Js

/* global Modernizr */

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

(function(window, document, Modernizr) {
  "use strict";

  var d = document;
  var transform = Modernizr.prefixed('transform');

  function ImageSliderIndicators(imageSlider, options) {
    this.imageSlider = imageSlider;
    this.options = Object.assign({}, ImageSliderIndicators.DEFAULTS, options || {});
    this.el = d.querySelector('.' + this.options.indicatorsClass);
    this.indicators = [].slice.call(d.querySelectorAll('.' + this.options.indicatorClass));

    this.imageSlider.el.addEventListener('positionChanged', this.onPositionChanged.bind(this));
    this.el.addEventListener('click', this.onIndicatorClick.bind(this), false);
    this.onPositionChanged();
  }

  ImageSliderIndicators.DEFAULTS = {
    indicatorsClass: 'ImageSlider-indicators',
    indicatorClass: 'ImageSlider-indicator',
    indicatorActiveClass: 'ImageSlider-indicator--is-active'
  };

  ImageSliderIndicators.prototype.onIndicatorClick = function onIndicatorClick(event) {
    var position = this.indicators.indexOf(event.target);
    if (position !== -1) {
      this.imageSlider.goto(position);
    }
  };

  ImageSliderIndicators.prototype.onPositionChanged = function onPositionChanged() {
    var self = this;
    this.indicators.forEach(function(element, index) {
      var action = index === self.imageSlider.position ? 'add' : 'remove';
      element.classList[action](self.options.indicatorActiveClass);
    });
  };

  function ImageSlider(options) {
    this.options = Object.assign({}, ImageSlider.DEFAULTS, options || {});
    this.position = 0;
    this.el = d.querySelector('.' + this.options.imageSliderClass);
    this.items = d.querySelector('.' + this.options.itemsClass);
    this.itemCount = d.querySelectorAll('.' + this.options.itemClass).length;
    this.scroller = d.querySelector('.' + this.options.scrollerClass);
    this.previousButton = d.querySelector('.' + this.options.previousButtonClass);
    this.nextButton = d.querySelector('.' + this.options.nextButtonClass);
    this.indicators = new ImageSliderIndicators(this, this.options.indicators);

    window.addEventListener('resize', this.render.bind(this));
    this.nextButton && this.nextButton.addEventListener('click', this.next.bind(this));
    this.previousButton && this.previousButton.addEventListener('click', this.previous.bind(this));
  }

  ImageSlider.DEFAULTS = {
    imageSliderClass: 'ImageSlider',
    itemsClass: 'ImageSlider-items',
    itemClass: 'ImageSlider-item',
    scrollerClass: 'ImageSlider-scroller',
    previousButtonClass: 'js-ImageSlider-button--previous',
    nextButtonClass: 'js-ImageSlider-button--next'
  };

  ImageSlider.prototype.render = function render() {
    this.items.style[transform] = 'translate3d(' + (-this.position * this.items.offsetWidth) + 'px,0,0)';
  };

  ImageSlider.prototype.goto = function goto(position) {
    var event = d.createEvent('Event');
    event.initEvent('positionChanged', true, true);
    this.position = position;
    this.el.dispatchEvent(event);
    this.render();
  };

  ImageSlider.prototype.previous = function previous() {
    this.goto((this.position + (this.itemCount - 1)) % this.itemCount);
  };

  ImageSlider.prototype.next = function next() {
    this.goto((this.position + 1) % this.itemCount);
  };

  window.ImageSlider = ImageSlider;

}).call(this, window, window.document, Modernizr);

new ImageSlider();

Answer 1

在 slider 初始化之前，您的代码中存在 JavaScript 错误。

Uncaught ReferenceError :Modernizr 未定义

您应该解决此依赖性问题，我想您的 slider 会起作用。

(也许将 Modernizr url 中的 http 更改为 https)