javascript - 如何平滑幻灯片过渡到下一个/上一个 YouTube 播放列表视频？ YouTube API(包括 fiddle )

Question

我想知道是否有人会有任何建议。我希望将单个 YouTube 播放列表嵌入为 slider ，并平滑过渡上一个和下一个提示(或按钮)。到目前为止，我有一个 Fiddle，它展示了它的核心功能，但现在我正在寻找某种解决方案，它可以实现平滑的滑动/轮播过渡，向右(显示以前的视频)和向左(对于最近的视频) .有任何想法吗？

这是我的 fiddle :https://jsfiddle.net/dwqawm21/

否则，您可以运行/测试以下代码段:

var App = App || {};

App.YoutubePlaylistLoader = {

  resultsTarget: null,

  xhr: null,

  apiBase: 'https://www.googleapis.com/youtube/v3',

  prevPageToken: null,
  nextPageToken: null,

  results: null,

  params: {
    maxResults: 1,
    playlistId: 'BhKKjnUR0XB8DwQwXqBsChb48E8jzfr-',
    key: 'AIzaSyCO9WXh_74m7ATK50P0vegWRQwjVADShmA',
    part: 'contentDetails,snippet',
    pageToken: null
  },

  init: function(resultsTarget) {
    var _this = App.YoutubePlaylistLoader;

    _this.resultsTarget = resultsTarget;
    _this.resultsTarget.on('click', '.youtube-result', _this.onResultClick);

    _this.getPlaylistItems();
  },

  previousPage: function() {
    var _this = App.YoutubePlaylistLoader;
    if (!_this.prevPageToken) {
      return false;
    }
    _this.params.pageToken = _this.prevPageToken;
    _this.getPlaylistItems();
  },

  nextPage: function() {
    var _this = App.YoutubePlaylistLoader;
    if (!_this.nextPageToken) {
      return false;
    }
    _this.params.pageToken = _this.nextPageToken;
    _this.getPlaylistItems();
  },

  getPlaylistItems: function() {
    var _this = App.YoutubePlaylistLoader;

    _this.resultsTarget.html('');

    _this.xhr && _this.xhr.abort();

    _this.xhr = $.ajax({
      url: _this.apiBase + '/playlistItems',
      data: _this.params,
      success: function(response) {

        _this.prevPageToken = response.prevPageToken;
        _this.nextPageToken = response.nextPageToken;

        if (response.items) {
          _this.processResults(response.items);
        }
      },
      error: function(xhr, errorThrown, textStatus) {
        console.log(errorThrown);
      }
    });
  },

  processResults: function(results) {
    var _this = App.YoutubePlaylistLoader;
    _this.results = results;

    var resultsHTML = '';

    for (var i = 0; i < _this.results.length; i++) {
      var result = _this.results[i];
      resultsHTML += [
        '<a href="javascript:void(0)" data-video-id="',
        result.contentDetails.videoId,
        '" class="youtube-result">',
        '<img src=' + (
          result.snippet.thumbnails.medium ?
          result.snippet.thumbnails.medium.url :
          result.snippet.thumbnails.default.url
        ) + '>',
        '<strong>' + result.snippet.title + '</strong>',
        '<span class="clearfix"></span>',
        '</a>'
      ].join('');
    }

    _this.resultsTarget.html(resultsHTML);

  },

  onResultClick: function() {
    var _this = App.YoutubePlaylistLoader;
    var videoId = $(this).data('video-id');
    window.open('https://www.youtube.com/watch?v=' + videoId, '_system');
  }

};

$(function() {
  App.YoutubePlaylistLoader.init($('#results'));
});

.clearfix {
  display: block;
  clear: both;
}

.youtube-result {
  display: block;
  color: #000;
  background-color: #EEE;
  text-decoration: none;
}

.youtube-result:active {
  background-color: #DDD;
}

.youtube-result strong {
  display: block;
  padding: 10px;
  font: bold 13pt sans-serif;
}

.youtube-result img {
  float: left;
  width: 160px;
  margin-right: 10px;
}

.youtube-result+.youtube-result {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>
<button type="button" onclick="App.YoutubePlaylistLoader.previousPage()">Prev</button>
<button type="button" onclick="App.YoutubePlaylistLoader.nextPage()">Next</button>

Answer 1

我已经编辑了你的 fiddle 并添加了平滑的滑动/褪色。

https://jsfiddle.net/canaanites/k5mybrgu/

诀窍:

我创建了两个类。一个用于褪色，另一个用于滑动。

<div id="results" class="fadeIn slide"></div>

到目前为止一切顺利，除了一个问题。 CSS 动画只会在开始时应用一次。下面的代码解决了这个问题。

_this.resultsTarget.removeClass("slide");
setTimeout(function(){ _this.resultsTarget.addClass("slide"); }, 10);

更新:稍微改变了 fiddle 链接和代码