Question

我目前正在创建一个轮播，因此开发人员只需在页面中插入一个无序列表。然后，JS将使用相关的div包装UL以使轮播工作。我决定以这种方式接近它的原因有几个：

首先;所有开发人员都可以轻松地将UL复制并粘贴到页面中; 其次;最终，通过使用数据属性，开发人员将能够确定轮播将在什么断点处启动。例如，在桌面上，将没有轮播，只有4个图像以网格形式布局，但是通过使用数据attr等作为'data-carousel =“720”'，旋转木马将以720px开始。

现在我有点工作了。我得到旋转木马包装，根据断点进行包装和展开。我也正在开始旋转木马，当它到达断点时，然而，当我回到桌面时，我不能为我的生活，删除应用旋转木马的功能。有人可以帮忙。

这是init脚本

$(function(){

  function doneResizing() {

    var width = $(window).width();
        //getDataAttr = $car.data('carousel');

    if (width <=767) {
      carousel.createWrap();
      carousel.beginCarousel();
    } else {
      carousel.removeWrap();
      carousel.destroyCarousel();
    }
  }

  var id;

  $(window).on('load resize orientationchange', function() {  

    clearTimeout(id);
    id = setTimeout(doneResizing, 500);
  });

});

这是主要的脚本

var carousel = (function() {

  var test;

  return {

    createWrap: function() {
      var $carContainer = $('<div class="carousel-container" />')
          $carViewer = $('<div class="carousel-viewer" />'),
          $carBtnWrap = $('<div class="carousel-buttons" />'),
          $carBtnUl = $('<ul />');

      $carContainer.append($carViewer, $carBtnWrap);
      $carBtnWrap.append($carBtnUl);

      $('.carousel').wrap($carContainer);

    },

    removeWrap: function() {
      $('.carousel-container .carousel-viewer').unwrap();
      $('.carousel-viewer .carousel-group').unwrap();
      $('.carousel-viewer .carousel').unwrap();
      $('.carousel-buttons').remove();
    },

    beginCarousel: function() {
      $('.carousel-container').each(function() {
        var $this = $(this),
            $group = $this.find('.carousel'),
            $slides = $this.find('li'),
            buttonArray = [],
            currentIndex = 0,
            timeout;

        function move (newIndex) {
          var animateLeft,
              animateRight;

          advance();

          if ($group.is(':animated' || currentIndex === newIndex)) {
            return;
          }

          buttonArray[currentIndex].removeClass('active');
          buttonArray[newIndex].addClass('active');

          if (newIndex > currentIndex) {
            slideLeft = '100%';
            animateLeft= '-100%';
          } else {
            slideLeft = '-100%';
            animateLeft = '100%';
          }

          $slides.eq(newIndex).css({
            left: slideLeft,
            display: 'block'
          });

          $group.animate({
            left: animateLeft
          }, function () {
                $slides.eq(currentIndex).css({
                  display: 'none'
                });

                $slides.eq(newIndex).css({
                  left: 0
                });

                $group.css({
                  left: 0
                });

                currentIndex = newIndex;
          });
        }


        function advance () {
          clearTimeout(timeout);

          timeout = setTimeout(function() {
            if (currentIndex < ($slides.length - 1)) {
              move(currentIndex + 1);
            } else {
              move(0);
            }
          }, 5000);
        }

        $.each($slides, function(index) {
          var $buttonWrap = $('.carousel-buttons ul'),
              $buttonLi = $('<li />'),
              $button = $('<a href="">&bull;</a>');

          $button.appendTo($buttonLi);

          $buttonLi.appendTo($buttonWrap);

          if (index === currentIndex) {
            $button.addClass('active');
          }

          $button.on('click', function (e) {
            e.preventDefault();
            move(index);
          });
            buttonArray.push($button);
        });

        advance();
      });

    },

    destroyCarousel: function() {

    }
  };

}());

任何人都可以帮忙，我是否正确地接近这个？

响应式旋转木马 - 一种不同的方法

0 个答案: