无限图像画廊角js

时间:2014-10-14 18:25:59

标签: angularjs

我试图以角度建立无限的图像库,但我不知道如何实现这一目标。这是codepen。我建立图像库,但它不是无限的。

有人可以帮我吗?

<div data-ng-app="theApp" data-ng-controller="mainController">
  <div class="main-shell clearfix">
    <div class="view-window" ng-mouseenter="stopAutoSlide()" ng-mouseleave="startAutoSlide()">
        <ul class="full-size-list list-unstyled" ng-style="listPosition" >
            <li ng-repeat="image in galleryData track by $index">
                <a href=""><img ng-src="{{image}}" class="img-responsive"/></a>
            </li>
        </ul>
    </div>
    <div class="bullets clearfix">
        <ul>
            <li ng-repeat="image in galleryData track by $index" ng-class="{active: selected == image}">
                    <a ng-href="" ng-click="scrollTo(image,$index)">
                        {{$index}}
                    </a>
            </li>
        </ul>
    </div>
</div>

.main-shell {
position: relative;
  width:300px;
  margin:100px;
ul{
    padding:0;
    margin:0;
    width:10000px;  
  li {
    list-style:none;
    display:inline-block;

}
}
}
.view-window {
    overflow: hidden;
    position:relative;
}

.full-size-list{
    position:relative;
    transition:  left .8s ease;
}
.bullets {
  background: transparent;
width: 100%;
position: absolute;
bottom: 30px;
right: 15px;
width: 30%;
  ul li {
    border-radius:10px;
    width:20px;
    height: 20px;
    background: #fff;
    text-align: center;
    margin-left: 0.3em;
     cursor:pointer;
    a {
      color:#333;
      &:hover {
        text-decoration:none;
      }

    }
  }
}
.bullets ul li.active {
  background: #000;
  a {
    color:#fff;
  }
}


var myApp = angular.module("theApp", []);

myApp.controller("mainController", ["$scope","$interval", function($scope, $interval){


  $scope.galleryData = [
'http://placehold.it/300x300&text=1',
    'http://placehold.it/300x300&text=2',
    'http://placehold.it/300x300&text=3'
];
  $scope.selected = $scope.galleryData[0];
  var IMG_WIDTH = 300;
  $scope.scrollTo = function(image,ind) {
    $scope.listPosition = {left:(IMG_WIDTH * ind * -1) + "px"};
    $scope.selected = image;

}
  var i = 0;
  var autoSlide = function() {
     $scope.scrollTo($scope.galleryData[i], i); 
    if(i + 1 == $scope.galleryData.length) {
       i = 0;
    } else {
      i++;

    }
  }
var autoSlideInterval  = $interval(autoSlide ,2000);

  $scope.startAutoSlide = function() {
     autoSlideInterval  = $interval(autoSlide ,5000);
  }

  $scope.stopAutoSlide = function() {
    $interval.cancel(autoSlideInterval);
  }



}]);

http://codepen.io/phpnetanel/pen/DnwJK

0 个答案:

没有答案