AngularJS 图像滑块答案

【问题标题】：AngularJS image sliderAngularJS 图像滑块
【发布时间】：2013-10-16 19:00:43
【问题描述】：

我正在使用来自 here 的代码使用 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;
}

【问题讨论】：

你能发布一个 plunkr 或 jsfiddle 来演示这个问题吗？
fiddle 不支持 angularjs 1.1.5。尝试使用 plunker，但结果与我在系统中看到的不同。 plnkr.co/edit/sV1xckE7SCyMX9b3dVT0 给你。
好的。它适用于 chrome，但不适用于 Firefox 和 IE
我添加了一个答案。确保你在你的 html 上放置了一个 ng-app（你的 plunkr 没有它就无法工作），我认为一些浏览器在动画左侧存在问题。我把它换成了margin-left，它在chrome和ff中工作。 IE 可能会也可能不会。

标签： angularjs slider

【解决方案1】：

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

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

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

【讨论】：

plunkr 示例在 IE 8 中不起作用。我使用 Angular 版本 1.2 进行了尝试。但它也没有用:(如何使用 angular 1.2 做相同的滑块？提前致谢
Angular 不正式支持 ie8。

【解决方案2】：

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

我只需要将其从 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>

【讨论】：

如何在这个滑块上使用下一个/上一个按钮？