将代码javascript转换为angularjs

时间：2016-10-03 15:38:05

标签： javascript angularjs

下面的代码是在JavaScript中，我在javascript上工作​​，这个脚本用于卫星天气图像动画。所以现在使用angularjs可以将此代码转换为angularjs吗？ 

var pic1=new Image()
pic1.src="http://api.arabiaweather.com/localsat/gulf_ksa1//61.jpg"
var pic2=new Image()
pic2.src="http://api.arabiaweather.com/localsat/gulf_ksa1//60.jpg"
var pic3=new Image()
pic3.src="http://api.arabiaweather.com/localsat/gulf_ksa1//59.jpg"
var pic4=new Image()
pic4.src="http://api.arabiaweather.com/localsat/gulf_ksa1//58.jpg"
var pic5=new Image()
pic5.src="http://api.arabiaweather.com/localsat/gulf_ksa1//57.jpg"
var pic6=new Image()
pic6.src="http://api.arabiaweather.com/localsat/gulf_ksa1//56.jpg"
var pic7=new Image()
pic7.src="http://api.arabiaweather.com/localsat/gulf_ksa1//55.jpg"
var pic8=new Image()
pic8.src="http://api.arabiaweather.com/localsat/gulf_ksa1//54.jpg"
var pic9=new Image()
pic9.src="http://api.arabiaweather.com/localsat/gulf_ksa1//53.jpg"
var pic10=new Image()
pic10.src="http://api.arabiaweather.com/localsat/gulf_ksa1//52.jpg"
var pic11=new Image()
pic11.src="http://api.arabiaweather.com/localsat/gulf_ksa1//51.jpg"
var pic12=new Image()
pic12.src="http://api.arabiaweather.com/localsat/gulf_ksa1//50.jpg"
var pic13=new Image()
pic13.src="http://api.arabiaweather.com/localsat/gulf_ksa1//49.jpg"
var pic14=new Image()
pic14.src="http://api.arabiaweather.com/localsat/gulf_ksa1//48.jpg"
var pic15=new Image()
pic15.src="http://api.arabiaweather.com/localsat/gulf_ksa1//47.jpg"
var pic16=new Image()
pic16.src="http://api.arabiaweather.com/localsat/gulf_ksa1//46.jpg"
var pic17=new Image()
pic17.src="http://api.arabiaweather.com/localsat/gulf_ksa1//45.jpg"
var pic18=new Image()
pic18.src="http://api.arabiaweather.com/localsat/gulf_ksa1//44.jpg"
var pic19=new Image()
pic19.src="http://api.arabiaweather.com/localsat/gulf_ksa1//43.jpg"
var pic20=new Image()
pic20.src="http://api.arabiaweather.com/localsat/gulf_ksa1//42.jpg"
var pic21=new Image()
pic21.src="http://api.arabiaweather.com/localsat/gulf_ksa1//41.jpg"
var pic22=new Image()
pic22.src="http://api.arabiaweather.com/localsat/gulf_ksa1//40.jpg"
var pic23=new Image()
pic23.src="http://api.arabiaweather.com/localsat/gulf_ksa1//39.jpg"
var pic24=new Image()
pic24.src="http://api.arabiaweather.com/localsat/gulf_ksa1//38.jpg"
var pic25=new Image()
pic25.src="http://api.arabiaweather.com/localsat/gulf_ksa1//37.jpg"
var pic26=new Image()
pic26.src="http://api.arabiaweather.com/localsat/gulf_ksa1//36.jpg"
var pic27=new Image()
pic27.src="http://api.arabiaweather.com/localsat/gulf_ksa1//36.jpg"
var pic28=new Image()
pic28.src="http://api.arabiaweather.com/localsat/gulf_ksa1//35.jpg"
var pic29=new Image()
pic29.src="http://api.arabiaweather.com/localsat/gulf_ksa1//34.jpg"
var pic30=new Image()
pic30.src="http://api.arabiaweather.com/localsat/gulf_ksa1//33.jpg"
var pic31=new Image()
pic31.src="http://api.arabiaweather.com/localsat/gulf_ksa1//32.jpg"
var pic32=new Image()
pic32.src="http://api.arabiaweather.com/localsat/gulf_ksa1//31.jpg"
var pic33=new Image()
pic33.src="http://api.arabiaweather.com/localsat/gulf_ksa1//30.jpg"
var pic34=new Image()
pic34.src="http://api.arabiaweather.com/localsat/gulf_ksa1//29.jpg"
var pic35=new Image()
pic35.src="http://api.arabiaweather.com/localsat/gulf_ksa1//28.jpg"
var pic36=new Image()
pic36.src="http://api.arabiaweather.com/localsat/gulf_ksa1//27.jpg"
var pic37=new Image()
pic37.src="http://api.arabiaweather.com/localsat/gulf_ksa1//26.jpg"
var pic38=new Image()
pic38.src="http://api.arabiaweather.com/localsat/gulf_ksa1//25.jpg"
var pic39=new Image()
pic39.src="http://api.arabiaweather.com/localsat/gulf_ksa1//24.jpg"
var pic40=new Image()
pic40.src="http://api.arabiaweather.com/localsat/gulf_ksa1//23.jpg"
var pic41=new Image()
pic41.src="http://api.arabiaweather.com/localsat/gulf_ksa1//22.jpg"
var pic42=new Image()
pic42.src="http://api.arabiaweather.com/localsat/gulf_ksa1//21.jpg"
var pic43=new Image()
pic43.src="http://api.arabiaweather.com/localsat/gulf_ksa1//20.jpg"
var pic44=new Image()
pic44.src="http://api.arabiaweather.com/localsat/gulf_ksa1//19.jpg"
var pic45=new Image()
pic45.src="http://api.arabiaweather.com/localsat/gulf_ksa1//18.jpg"
var pic46=new Image()
pic46.src="http://api.arabiaweather.com/localsat/gulf_ksa1//17.jpg"
var pic47=new Image()
pic47.src="http://api.arabiaweather.com/localsat/gulf_ksa1//16.jpg"
var pic48=new Image()
pic48.src="http://api.arabiaweather.com/localsat/gulf_ksa1//15.jpg"
var pic49=new Image()
pic49.src="http://api.arabiaweather.com/localsat/gulf_ksa1//14.jpg"
var pic50=new Image()
pic50.src="http://api.arabiaweather.com/localsat/gulf_ksa1//13.jpg"
var pic51=new Image()
pic51.src="http://api.arabiaweather.com/localsat/gulf_ksa1//12.jpg"
var pic52=new Image()
pic52.src="http://api.arabiaweather.com/localsat/gulf_ksa1//11.jpg"
var pic53=new Image()
pic53.src="http://api.arabiaweather.com/localsat/gulf_ksa1//10.jpg"
var pic54=new Image()
pic54.src="http://api.arabiaweather.com/localsat/gulf_ksa1//9.jpg"
var pic55=new Image()
pic55.src="http://api.arabiaweather.com/localsat/gulf_ksa1//8.jpg"
var pic56=new Image()
pic56.src="http://api.arabiaweather.com/localsat/gulf_ksa1//7.jpg"
var pic57=new Image()
pic57.src="http://api.arabiaweather.com/localsat/gulf_ksa1//6.jpg"
var pic58=new Image()
pic58.src="http://api.arabiaweather.com/localsat/gulf_ksa1//5.jpg"
var pic59=new Image()
pic59.src="http://api.arabiaweather.com/localsat/gulf_ksa1//4.jpg"
var pic60=new Image()
pic60.src="http://api.arabiaweather.com/localsat/gulf_ksa1//3.jpg"
var pic61=new Image()
pic61.src="http://api.arabiaweather.com/localsat/gulf_ksa1//2.jpg"
var pic62=new Image()
pic62.src="http://api.arabiaweather.com/localsat/gulf_ksa1//1.jpg"

var counter=1
function animate(){
//does not animate if the browser does not support images
if (!document.images)
return
document.images.animation.src=eval("pic"+counter+".src")
if (counter<61)
counter++
else
counter=1
//controls the speed of the transition, in this case 100 means 100 milliseconds or 1/10 seconds
setTimeout("animate()",100)
}
animate()

html 

  <img src="http://api.arabiaweather.com/localsat/gulf_ksa1//1.jpg" name="animation" style="width:auto;" class="img-responsive">

任何人都可以告诉我，怎么做？

1 个答案:

答案 0 :(得分：-1)

我会制作一个Angular控制器来处理带有图像的视图。然后，您可以使用$interval函数在预定义的时间内更新此图像源。 $interval函数的第三个参数允许最大重复量，因此您不必担心它会无限迭代。

JavaScript的：

angular.module('yourAppName')
  .controller('PageController',function($interval,$scope) {
    TIMING = 100 // ms of animation sequence
    TOTAL = 60 // total number of images
    $scope.currentIndex = 1;
    $interval(function() { $scope.currentIndex++ }, TIMING, TOTAL);
  });

HTML：

<img ng-src="http://api.arabiaweather.com/localsat/gulf_ksa1/{{currentIndex}}.jpg" name="animation" style="width:auto;" class="img-responsive">

<强>更新

这是一个CodePen，显示此解决方案将起作用。您可能希望在我的JS面板中查看AngularJS中的基本格式，这样您就可以看到如何创建应用程序并将其引导到HTML。

此外，可能是您最初指定的时间（100ms）对于60个图像（60 * 100ms = 6000ms = 6s）来说有点太快，在6秒时，这可能已经超过浏览器有机会加载并显示所有60张图像。

http://codepen.io/frankrue/pen/XjzXGj

希望这会有所帮助。并修复了我的投票。 ：）

相关问题
最新问题