如何使用JavaScript为HTML中的图像创建循环变量src属性

所以我做了这个代码：

一些交通灯
var-app=angular.module（'myApp'，[]）；
//*****声明变量*****//
var lightSrcs=['TLgre.png'，'TLyel.png'，'TLred.png']；
var-cycleNumber=0；
var阶数=0；
//*****数字循环功能*****//
功能循环（）{
如果（顺序==0）{
if（cycleNumber==3）{
CycleEnumber-=1；
顺序=1；
}否则{
CycleEnumber+=1；
}
}否则如果（订单===1）{
如果（cycleNumber您可以通过使用页面上已加载的angular来帮助自己，从而使这一点变得更容易。如果您不打算利用angular，那么加载更大的框架（如angular）是没有实际意义的：）

无论如何，你要找的是这样的东西：

您可以通过
ng click
和
ng src
将img和按钮更改为使用角度逻辑，如下所示：

<img id="trafficLight" ng-src="{{lightSrcs[currentSelection]}}"></img>

<button type="button" ng-click="cycleLights()" >

当使用数组时，有比这更优雅的方法，但为了举例，我将只使用您现有的逻辑。因此，在按钮上有
ng click
，该按钮调用封装在其上的控制器中的$scope函数。然后可以旋转该函数中的计数。然后使用
ng src让angular使用正在旋转的数组和索引正确评估图像位置。
您可以使用更多角度逻辑，设置控制器，然后使用angular
ng src
指令来实现这一点。现在您正在混合和匹配普通js dom选择和angular。您可以在纯a中轻松完成这类操作ngular和你已经安装了应用程序。哇，谢谢你，老兄，我不想撒谎，我甚至不知道ng src存在，可能应该考虑类似的事情。@AzrielBowles没问题，很高兴我能帮上忙。Angular也有很多，可能需要一点学习，但它有很多工具可以处理很多问题！如果这解决了关于你的作品，请标记为正确，因此问题不再开放。
$scope.lightSrcs = ['TLgre.png', 'TLyel.png', 'TLred.png'];
$scope.currentSelection = 0;

$scope.cycleLights = function(){
if($scope.currentSelection === 2) {
  $scope.currentSelection = 0;
} else {
  $scope.currentSelection += 1;
}

};