Angular로 슬라이드 쇼를 만드는 방법의 예를 찾았습니다. 거의 완료되었습니다. 그러나 왼쪽의 슬라이드 효과는이 예 에서처럼 작동하지 않습니다. http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview
누구든지 내가 뭘 잘못했는지 아이디어.
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;
});.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%;
}<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>당신은 잘못한 것이 없습니다. ngAnimate는 Angular 1.2에서 더 이상 사용되지 않으므로 코드를 변경해야합니다. https://johnpapa.net/preparing-for-animations-in-angular-1-2-0/
이전 버전 (Plnker에서와 같이 아래 1.1.5)으로 전환하면 코드가 제대로 작동하는 것을 볼 수 있습니다.
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;
});#mainbody {
width:50%;
height: auto;
margin: 0 auto;
}
.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%;
} <script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다