javascript – AngularJS多品种转盘

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS多品种转盘前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用UI Bootstrap转盘,但它只显示一个幻灯片http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview.
如何以这种方式显示图像?
img1 - img2 - img3
then
img2 - img3 - img4 
then
img3 -img4 - img5
then
img4 - img5 - img6
then
img5 - img6 - img1

(如这个旋转木马http://coolcarousels.frebsite.nl/c/58/)

解决方法

您可以使用ng-repeat内的$index创建其他图像并添加下两个图像.

http://plnkr.co/edit/oVRYCfaMeRW5a54nzmem?p=preview

<carousel interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <div class="" style="width:600px;margin:auto;">
    <div >
    <img ng-src="{{slide.image}}" width="200px" style="float:left;">
    </div>
    <div >
    <img ng-src="{{slides[getSecondIndex($index+1)].image}}" width="200px" style="float:left;" >
    </div>
     <div >
    <img ng-src="{{slides[getSecondIndex($index+2)].image}}" width="200px" style="float:left;" >
    </div>
    </div>
  </slide>
</carousel>

代码获取旋转图像

$scope.getSecondIndex = function(index)
  {
    if(index-slides.length>=0)
      return index-slides.length;
    else
      return index;
  }
原文链接:https://www.f2er.com/js/154885.html

猜你在找的JavaScript相关文章