AngularJS图像滑块 [英] AngularJS image slider

问题描述

使用codeS由这里正在创建的图像滑盖Angularjs

使用AngularJS 1.15，我能得到的图像中滑动。但是，当第二图像进来，第一个形象反而会消失滑出。有人可以帮忙吗？

请注意：这不会在Firefox和IE浏览器，但适用于Chrome

。

下面是我的codeS
HTML

 ＆LT; D​​IV NG控制器=slideShowController级=imageslideNG-开关='幻灯片'NG-动画='动画'＆GT;
    ＆LT; D​​IV CLASS =滑块内容NG-开关时=1＆GT;
        ＆LT; IMG SRC =资产/ building.jpgWIDTH =100％HEIGHT =400像素/＆GT;
    ＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =滑块内容NG-开关时=2＆GT;
    ＆LT; IMG SRC =资产/幻灯片2.JPGWIDTH =100％HEIGHT =400像素/＆GT;
    ＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =滑块内容NG-开关时=3＆GT;
    ＆LT; IMG SRC =资产/滑动3.JPGWIDTH =100％HEIGHT =400像素/＆GT;
    ＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =滑块内容NG-开关时=4＆GT;
    ＆LT; IMG SRC =资产/滑动4.JPGWIDTH =100％HEIGHT =400像素/＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

的JavaScript

 函数slideShowController（$范围，$超时）{
 变种slidesInSlideshow = 4;
 VAR slidesTimeIntervalInMs = 3000; $ scope.slideshow = 1;
 VAR slideTimer =
 $超时（功能间隔（）{
     $ scope.slideshow =（$ scope.slideshow％slidesInSlideshow）+ 1;
     slideTimer = $超时（时间，slidesTimeIntervalInMs）;
     }，slidesTimeIntervalInMs）;
 }
 

CSS

  .imageslide {
宽度：100％;
高度：400像素;
保证金：0汽车;
保证金底：20像素;
}.imageslide .slider内容{
位置：绝对的;
宽度：100％;
高度：400像素;
}.animate输入，.animate休假{
-webkit-转变：1000毫秒立方贝塞尔（0.165，0.84，.44,1）所有;
-moz-转变：1000毫秒立方贝塞尔（0.165，0.84，.44,1）所有;
-ms过渡：1000毫秒立方贝塞尔（0.165，0.84，.44,1）所有;
-o过渡：1000毫秒立方贝塞尔（0.165，0.84，.44,1）所有;
过渡：1000毫秒立方贝塞尔（0.165，0.84，.44,1）所有;
}.animate输入{
左：100％;
}.animate-leave.animate休假活跃{
左：-100％;
}.animate-enter.animate进入活跃，.animate休假{
左：0;
}
 

解决方案

我与你plunker看到的最大的问题是在页面上缺乏 NG-应用属性。并补充说，改变动画的外出使用后利润率左正常工作：

  .animate-leave.animate休假活跃{
    保证金左：-100％;
}
 

叉形plunkr：
http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=$p$pview

Am creating an image slider with Angularjs using the codes from here

Using AngularJS 1.15, I could get the image to slide in. But when the second image comes in, the first image will disappear instead of sliding out. Can someone help?

NOTE: this does not work on Firefox and IE but works on Chrome.

Here are my codes 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;
}

解决方案

The biggest issue I see with your plunker is the lack of an ng-app attribute on the page. After adding that and changing the animate out to use margin-left it works fine:

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

Forked plunkr: http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview

这篇关于AngularJS图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！