我试图以角度建立无限的图像库,但我不知道如何实现这一目标。这是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);
}
}]);