Slideshow eckig funktioniert nicht

Haben Sie ein Beispiel dafür gefunden, wie Sie eine Diashow mit Angular machen, ist es fast fertig. Der Slide-Effekt auf der linken Seite funktioniert jedoch nicht wie in diesem Beispiel. http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview Slideshow eckig funktioniert nicht

Jeder eine Idee, was ich falsch gemacht habe.

var pictures = angular.module("myApp", []) 
 
\t .controller("SlideShowController", function($scope, $timeout) { 
 
\t var slideInSlideshow = 4; 
 
\t var slideTimeInterval = 4000; 
 

 
\t $scope.slider = 1; 
 
\t \t var slideTimer = 
 
\t \t $timeout(function interval() { 
 
\t \t \t 
 
\t \t $scope.slider = ($scope.slider % slideInSlideshow) + 1; 
 

 

 
\t \t slideTimer = $timeout(interval, slideTimeInterval); 
 
\t }, slideTimeInterval); 
 
\t \t \t 
 
\t var image = { 
 
\t \t one: "image/image01.jpg", 
 
\t \t two: "image/image02.jpg", 
 
\t \t three: "image/image03.jpg", 
 
\t \t four: "image/image04.jpg" 
 
\t }; 
 
\t 
 
\t \t $scope.image = image; 
 
\t });

.slideshow { 
 
\t width: 600px; 
 
\t height: 400px; 
 
\t margin: 0 auto; 
 
\t margin-bottom: 30px; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
\t 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 { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t height: 400px; 
 
} 
 

 
.slide-image { 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.animate-enter,.animate-leave { 
 
\t -webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all; 
 
\t -moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all; 
 
\t -ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all; 
 
\t -o-transition:1000ms cubic-bezier(.165,.84,.44,1) all; 
 
\t transition:1000ms cubic-bezier(.165,.84,.44,1) all; 
 
} 
 

 
.animate-enter { 
 
\t margin-left: 100%; 
 
} 
 

 
.animate-enter.animate-enter-active { 
 
\t margin-left:0; 
 
} 
 

 
.animate-leave { 
 
\t margin-left:0; 
 
} 
 

 
.animate-leave.animate-leave-active { 
 
\t 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'"> 
 
\t \t <div class="slider-content" ng-switch-when="1"> 
 
\t \t \t <img ng-src="{{image.one}}" class="slide-image" alt="meizu-m3-picture" /> 
 
\t \t </div> 
 

 
\t \t <div class="slider-content" ng-switch-when="2"> 
 
\t \t \t <img ng-src="{{image.two}}" class="slide-image" alt="meizu-mx6-picture"/> 
 
\t \t </div> 
 

 
\t \t <div class="slider-content" ng-switch-when="3"> 
 
\t \t \t <img ng-src="{{image.three}}" class="slide-image" alt="meizu-m3s-picture"/> 
 
\t \t </div> 
 

 
\t \t <div class="slider-content" ng-switch-when="4"> 
 
\t \t \t <img ng-src="{{image.four}}" class="slide-image" alt="meizu-m3e-picture"/> 
 
\t \t </div> 
 
\t </div> 
 
    </body>

Quelle

2016-11-05 Fresh developer

Sie haben nichts falsch gemacht. ngAnimate wurde in Angular 1.2 nicht weiter unterstützt. Sie müssen daher Änderungen an Ihrem Code vornehmen. https://johnpapa.net/preparing-for-animations-in-angular-1-2-0/

Wenn Sie zu einer früheren Version (1.1.5 unten, wie im Plnker) wechseln, wird Ihr Code gut funktionieren.

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 { 
 
\t width:50%; 
 
\t height: auto; 
 
\t 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>

Quelle

2016-11-06 02:01:50

Danke, aber jetzt ist die ngRoute nicht mehr funktioniert. –

Slideshow eckig funktioniert nicht

Antwort

Verwandte Themen