Javascript 多项目响应转盘

我正在建立一个网站，需要一个旋转木马来实现。因为这个网站是建立在AngularJS上的，所以我想使用Angulars Boostrap旋转木马，但是，这个旋转木马一次只允许一张图片

我需要的是在桌面上、平板电脑上和手机上同时显示3张图像。因此，这里也涉及到响应性设计的一个重要元素

有没有人在这方面有没有不涉及JQuery的经验？我并不反对，但团队的一位高级成员告诉我，如果有替代方案，请尝试寻找

我从Angulars bootstrap尝试的是：

   $scope.getPromoURLs = function() {
        var subObj = myJSON.response.details.promotionalSpots;
        for( var keys in subObj ) {
            var value = subObj[keys].promotionUrl;
            $scope.slides.push( value );
        }
    };
    // Builts an array of promotional URLS to from a JSON object to source the images
    $scope.getPromoURLs();

    $scope.addSlide = function () {
        // Test to determine if 3 images can be pulled together - FAILS
        var newWidth = 600 + slides.length;
        slides.push({
           image: ''+slides[0]+''+slides[1] // etc
           // Tried to stitch images together here 
        });
    };

    // TODO Should examine array length not hardcoded 4
    for (var i = 0; i < 4; i++) {
        $scope.addSlide();
    }        

$scope.getPromoURLs=function（）{
var subObj=myJSON.response.details.promotionalpots；
for（子对象中的变量键）{
var value=subObj[keys].promotionUrl；
$scope.slides.push（值）；
}
};
//构建一个促销URL数组，从JSON对象到源图像
$scope.getPromoURLs（）；
$scope.addSlide=函数（）{
//测试以确定是否可以将3个图像拉到一起-失败
var newWidth=600+slides.length；
推({
图像：''+幻灯片[0]+''+幻灯片[1]//等
//尝试在这里将图像缝合在一起
});
};
//TODO应检查未硬编码的数组长度4
对于（变量i=0；i<4；i++）{
$scope.addSlide（）；
}        

ui引导的旋转木马不是一个好的选择，它还有其他缺点，比如每张幻灯片上的作用域都是孤立的。 我在每张幻灯片上使用哪个支持多个项目

<ul rn-carousel class="image">
  <li ng-repeat="images in imageCollection">
    <div ng-repeat="image in images" class="layer">{{ image }}</div>
  </li>
</ul>

因为这个指令支持ng REPECT。您可以轻松更改集合，并使用嵌套的ng repeat在每张幻灯片中设置不同数量的项目

<ul rn-carousel class="image">
  <li ng-repeat="images in imageCollection">
    <div ng-repeat="image in images" class="layer">{{ image }}</div>
  </li>
</ul>

---

所以，我尝试了这一个，以便使每个动画都可以使用多个项目。我还尝试应用[使用AngularJS检测响应性网站]

请看这里：

结果：

1）一项（手机版）：

2）两项（平板电脑版）：

3）三项（桌面版）：

第二部分： 它还可以检测窗口的分辨率，以确定它是

平板电脑、手机

还是

桌面

。。。 尝试使用以下值：

“移动、平板电脑、桌面”

查看三种不同的视图版本

平板电脑版本的演示

：

var app = angular.module('myApp', ['ui.bootstrap', 'angular-responsive']);

app.controller('MainCtrl', function($scope) {
  $scope.displayMode = 'mobile'; // default value


  $scope.$watch('displayMode', function(value) {

    switch (value) {
      case 'mobile':
        // do stuff for mobile mode
          console.log(value);
        break;
      case 'tablet':
        // do stuff for tablet mode
          console.log(value);
        break;
    }
  });
});

function CarouselDemoCtrl($scope) {
  var whatDevice = $scope.nowDevice;
  $scope.myInterval = 7000;
  $scope.slides = [{
    image: 'http://placekitten.com/221/200',
    text: 'Kitten.'
  }, {
    image: 'http://placekitten.com/241/200',
    text: 'Kitty!'
  }, {
    image: 'http://placekitten.com/223/200',
    text: 'Cat.'
  }, {
    image: 'http://placekitten.com/224/200',
    text: 'Feline!'
  }, {
    image: 'http://placekitten.com/225/200',
    text: 'Cat.'
  }, {
    image: 'http://placekitten.com/226/200',
    text: 'Feline!'
  }, {
    image: 'http://placekitten.com/227/200',
    text: 'Cat.'
  }, {
    image: 'http://placekitten.com/228/200',
    text: 'Feline!'
  }, {
    image: 'http://placekitten.com/229/200',
    text: 'Cat.'
  }, {
    image: 'http://placekitten.com/230/200',
    text: 'Feline!'
  }];


    var i, first = [],
      second, third;
    var many = 1;

    //##################################################    
    //Need to be changed to update the carousel since the resolution changed
    $scope.displayMode = "tablet";
    //##################################################
    if ($scope.displayMode == "mobile") {many = 1;}
    else if ($scope.displayMode == "tablet") {many = 2;} 
    else {many = 3;}

    for (i = 0; i < $scope.slides.length; i += many) {
      second = {
        image1: $scope.slides[i]
      };
      if (many == 1) {}
      if ($scope.slides[i + 1] && (many == 2 || many == 3)) {
        second.image2 = $scope.slides[i + 1];

      }
      if ($scope.slides[i + (many - 1)] && many == 3) {
        second.image3 = $scope.slides[i + 2];
      }
      first.push(second);
    }
    $scope.groupedSlides = first;
}

app.directive('dnDisplayMode', function($window) {
  return {
    restrict: 'A',
    scope: {
      dnDisplayMode: '='
    },
    template: '<span class="mobile"></span><span class="tablet"></span><span class="tablet-landscape"></span><span class="desktop"></span>',
    link: function(scope, elem, attrs) {
      var markers = elem.find('span');

      function isVisible(element) {
        return element && element.style.display != 'none' && element.offsetWidth && element.offsetHeight;
      }

      function update() {
        angular.forEach(markers, function(element) {
          if (isVisible(element)) {
            scope.dnDisplayMode = element.className;
            return false;
          }
        });
      }

      var t;
      angular.element($window).bind('resize', function() {
        clearTimeout(t);
        t = setTimeout(function() {
          update();
          scope.$apply();
        }, 300);
      });

      update();
    }
  };
});

var-app=angular.module（'myApp'，['ui.bootstrap'，'angular-responsive']）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.displayMode='mobile'；//默认值
$scope.$watch（'displayMode'，函数（值）{
开关（值）{
“手机”案例：
//为移动模式做些事情
console.log（值）；
打破
“药片”案例：
//为平板电脑模式做一些事情
console.log（值）；
打破
}
});
});
功能旋转木马（$scope）{
var whatDevice=$scope.nowDevice；
$scope.myInterval=7000；
$scope.slides=[{
图像：'http://placekitten.com/221/200',
文字：“小猫。”
}, {
图像：'http://placekitten.com/241/200',
短信：“基蒂！”
}, {
图像：'http://placekitten.com/223/200',
文字：“猫。”
}, {
图像：'http://placekitten.com/224/200',
文字：“猫！”
}, {
图像：'http://placekitten.com/225/200',
文字：“猫。”
}, {
图像：'http://placekitten.com/226/200',
文字：“猫！”
}, {
图像：'http://placekitten.com/227/200',
文字：“猫。”
}, {
图像：'http://placekitten.com/228/200',
文字：“猫！”
}, {
图像：'http://placekitten.com/229/200',
文字：“猫。”
}, {
图像：'http://placekitten.com/230/200',
文字：“猫！”
}];
var i，first=[]，
二,三,；
var=1；
//##################################################    
//需要更改以更新旋转木马，因为分辨率已更改
$scope.displayMode=“平板电脑”；
//##################################################
如果（$scope.displayMode==“mobile”）{many=1；}
如果（$scope.displayMode==“tablet”）{many=2；}
else{many=3；}
对于（i=0；i<$scope.slides.length；i+=many）{
秒={
图1:$scope.slides[i]
};
如果（many==1）{}
如果（$scope.slides[i+1]&&（many==2 | | many==3））{
second.image2=$scope.slides[i+1]；
}
if（$scope.slides[i+（many-1）]&&many==3）{
second.image3=$scope.slides[i+2]；
}
第一，推（第二）；
}
$scope.groupedSlides=第一个；
}
应用指令（'dnDisplayMode'，函数（$window）{
返回{
限制：“A”，
范围：{
dnDisplayMode:“=”
},
模板：“”，
链接：功能（范围、要素、属性）{
var markers=elem.find（'span'）；
函数是可见的（元素）{
返回元素&&element.style.display！=“无”&&element.offsetWidth&&element.offsetHeight；
}
函数更新（）{
角度。forEach（标记、功能（元素）{
如果（可见（元素））{
scope.dnDisplayMode=element.className；
返回false；
}
});
}
变量t；
angular.element（$window.bind（'resize'，function（））{
清除超时（t）；
t=设置超时（函数（）{
更新（）；
作用域：$apply（）；
}, 300);
});
更新（）；
}
};
});

希望有帮助
 （剧透：答案是否定的）。旋转木马真的、真的有必要吗？@GregL嗨，Greg，是的，我以前读过这篇文章，不幸的是，这是企业的一项要求，并且已经被开发人员质疑过——他们坚持使用它，你可以看看。这是一个快速响应的旋转木马（唉，构建在jQuery之上）@Katana24——我使用（这是这个旋转木马的第1版，第2版更好）