5

我正在使用此处的代码使用 Angularjs 创建图像滑块

使用 AngularJS 1.15，我可以让图像滑入。但是当第二个图像进来时，第一个图像会消失而不是滑出。有人可以帮忙吗？

注意：这不适用于 Firefox 和 IE，但适用于 Chrome。

这是我的代码 HTML

<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
    <div class="slider-content" ng-switch-when="1">
        <img src="asset/building.jpg" width="100%" height="400px"/>
    </div>  
<div class="slider-content" ng-switch-when="2">
    <img src="asset/slide-2.jpg" width="100%" height="400px"/>
    </div>
<div class="slider-content" ng-switch-when="3">
    <img src="asset/slide-3.jpg" width="100%" height="400px"/>
    </div>  
<div class="slider-content" ng-switch-when="4">
    <img src="asset/slide-4.jpg" width="100%" height="400px"/>
    </div>  
    </div>

Javascript

 function slideShowController($scope, $timeout) {
 var slidesInSlideshow = 4;
 var slidesTimeIntervalInMs = 3000; 

 $scope.slideshow = 1;
 var slideTimer =
 $timeout(function interval() {
     $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
     slideTimer = $timeout(interval, slidesTimeIntervalInMs);
     }, slidesTimeIntervalInMs);
 }

CSS

.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
}

.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}

.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 {
left:100%;
}

.animate-leave.animate-leave-active {
left:-100%;
}

.animate-enter.animate-enter-active,.animate-leave {
left:0;
}
4

2 回答 2

4

我在您的 plunker 中看到的最大问题是页面上缺少ng-app属性。添加它并将动画更改为使用 margin-left 后，它可以正常工作：

.animate-leave.animate-leave-active {
    margin-left:-100%;
}

分叉 plunkr： http ://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview

于 2013-10-16T20:40:51.837 回答
1

下面是我从这个页面引用并测试过的代码。它现在对我有用。

我只需要将其从 Jsp 自定义标签中动态传递图像 url。笔记 ：

它在 Chrome 和 Firefox 中为我工作。

但它在 IE 10 中不起作用。 我不明白为什么它在 IE 10 中不起作用，谁能告诉我？即使它没有在控制台中显示任何错误。

<html ng-app>

<head>

<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>

<script>
function slideShowController($scope, $timeout) {
 var slidesInSlideshow = 4;
 var slidesTimeIntervalInMs = 3000; 

 $scope.slideshow = 1;
 var slideTimer =
 $timeout(function interval() {
     $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
     slideTimer = $timeout(interval, slidesTimeIntervalInMs);
     }, slidesTimeIntervalInMs);
 }
 </script>
 <style>

 .imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
}

.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}

.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 {
left:100%;
}

.animate-leave.animate-leave-active {
left:-100%;
}

.animate-enter.animate-enter-active,.animate-leave {
left:0;
}

 </style>

 </head>

<body>

<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
    <div class="slider-content" ng-switch-when="1">
        <img src="http://digitalresult.com/wp-content/uploads/2015/10/fox-animal-hd-wallpapers-47.jpeg" width="100%" height="400px"/>
    </div>  
<div class="slider-content" ng-switch-when="2">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTewdD9dUZGbaCaRtV2Ggz_YxQq1tbhVcSphtRUjosU8a0_JOZF" width="100%" height="400px"/>
    </div>
<div class="slider-content" ng-switch-when="3">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/4e/ac/4e/4eac4e00cebdea7f62359bfd1b2ca51b.jpg" width="100%" height="400px"/>
    </div>  
<div class="slider-content" ng-switch-when="4">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrBU0M7EwiGepnnccRoe7jA5_fQ-AaOiu6WpehFqz85HhYhKHk" width="100%" height="400px"/>
    </div>  
    </div>

    </body>

    </html>
于 2016-05-27T03:48:59.610 回答