Question

已经找到了如何使用Angular制作幻灯片的示例，它几乎完成了。但是左边的滑动效果不像这个例子那样有用。 http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview

任何人都知道我做错了什么。

＆＃13;

var pictures = angular.module("myApp", [])
	.controller("SlideShowController", function($scope,  $timeout) {
	var slideInSlideshow = 4;
	var slideTimeInterval = 4000;

	$scope.slider = 1;
		var slideTimer =
		$timeout(function interval() {
			
		$scope.slider = ($scope.slider % slideInSlideshow) + 1;


		slideTimer = $timeout(interval, slideTimeInterval);
	}, slideTimeInterval);
			
	var image = {
		one: "image/image01.jpg", 
		two: "image/image02.jpg", 
		three: "image/image03.jpg", 
		four: "image/image04.jpg"
	};
	
		$scope.image = image;
	});

＆＃13;

.slideshow {
	width: 600px;
	height: 400px;
	margin: 0 auto;
	margin-bottom: 30px;
	overflow: hidden;
	position: relative;
	border: 1px solid red;
}

.slider {
  font-family: "Arial", sans-serif;
  text-align: center;
  position:relative;
  width:600px;
  overflow:hidden;
  background: #1a1a1a;
  margin: 0 auto;
  color: white;
  text-shadow: 1px 1px 1px #000;
  border-radius: .3em;
  margin-top: 30px;
}

.slideshow .slider-content {
	position: absolute;
	width: 100%;
	height: 400px;
}

.slide-image {
	width: 100%;
	height: auto;
}

.animate-enter,.animate-leave {
	-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
	-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
	-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
	-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
	transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}

.animate-enter {
	margin-left: 100%;
}

.animate-enter.animate-enter-active {
	margin-left:0;
}

.animate-leave {
	margin-left:0;
}

.animate-leave.animate-leave-active {
	margin-left:-100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="SlideShowController" class="slideshow"  ng-switch="slider" ng-animate="'animate'">
		<div class="slider-content" ng-switch-when="1">
			<img ng-src="{{image.one}}" class="slide-image" alt="meizu-m3-picture" />
		</div>

		<div class="slider-content" ng-switch-when="2">
			<img ng-src="{{image.two}}" class="slide-image" alt="meizu-mx6-picture"/>
		</div>

		<div class="slider-content" ng-switch-when="3">
			<img ng-src="{{image.three}}" class="slide-image" alt="meizu-m3s-picture"/> 
		</div>

		<div class="slider-content" ng-switch-when="4">
			<img ng-src="{{image.four}}" class="slide-image" alt="meizu-m3e-picture"/>
		</div>
	</div>
  </body>

＆＃13;

Answer 1

你没有做错任何事。在Angular 1.2中不推荐使用ngAnimate，因此您需要对代码进行更改。 https://johnpapa.net/preparing-for-animations-in-angular-1-2-0/

如果您切换到早期版本（下面的1.1.5，如在Plnker中），您将看到您的代码正常工作。

＆＃13;

.size()

＆＃13;

sizeof

＆＃13;

var pictures = angular.module("myApp", [])
  .controller("SlideShowController", function($scope, $timeout) {
    var slideInSlideshow = 4;
    var slideTimeInterval = 1000;

    $scope.slider = 1;
    var slideTimer =
      $timeout(function interval() {

        $scope.slider = ($scope.slider % slideInSlideshow) + 1;


        slideTimer = $timeout(interval, slideTimeInterval);
      }, slideTimeInterval);

    var image = {
      one: "image/image01.jpg",
      two: "image/image02.jpg",
      three: "image/image03.jpg",
      four: "image/image04.jpg"
    };

    $scope.image = image;
  });

＆＃13;

幻灯片角度不起作用

1 个答案: