Javascript 在按下的键上更改页面上的图像（使用）

我有这个数组

app.controller("ImagesController", function($scope){
    $scope.selectedImage = 0;
    $scope.images = [
        {
            image1: 'images/levels/level1/sky.jpg',
            image2: 'images/levels/level1/rain.jpg',
            image3: 'images/levels/level1/sky.jpg'
        },
        {
            image1: 'images/levels/level2/horse.jpg',
            image2: 'images/levels/level2/dog.jpg',
            image3: 'images/levels/level2/cat.jpg'
        }
    ];

我将向上面的阵列添加更多图像。

---

我希望一次有三张图片出现在我的html页面上。然后，当我按下右/左箭头键时，我希望这三个图像被替换为接下来的3个图像，依此类推（我猜基本上是将数组移动到下一个元素）。使用AngularJS或Jquery可以实现这一点吗？如果是，那么我如何实施它

---

编辑：我也可以不使用AngularJS，而是采用一种更简单的方法来更改图像，但我需要尽快实现这一点。

我会使用jQuery。您可以使用索引选择特定的数据“图像”集，将其绑定到这样的事件中

---

不过，您可能需要重新考虑图像数组，以便更好地以3的方式遍历集合。

而不是按照jquery的方式。。。最好是用有角度的方式。。。首先你可以用

它的使用非常简单，而且有很多选择

   <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>

幻灯片{{$index}
{{slide.text}

如果您想推出自己的实现，您可以使用ui按键或ui事件指令来实现，该指令在angular ui上再次可用

$scope.blurCallback=函数（evt）{
警报（“再见。输入内容为：”+evt.target.value）；
};

或

使用AngularJS或Jquery是否可以实现这一点？为了回答您的问题，简单地说是可能的。听起来您想要-，有数百个js插件可以做这类事情。无需使用属性将其过度复杂化

image1、image2、image3

，只需使用平面阵列即可。在角度变化阵列和视图变化乐园中，我访问了该网站。那没用，反正我想自己做。charlietfl，再次检查代码。我已经更新了。我想不能使用平面阵列。你好，哈里什。谢谢你的回答，但我在包括角度用户界面方面遇到了困难。我已经尝试过这个-Harish我已经成功地包含了angular ui，但是ui按键回答不起作用。请尽量让它在本地工作，让我知道它是否适合你。我需要包含哪些文件才能让它正常工作？你能设置一个plunker吗。。我会检查你的车

   <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>

<input ui-event="{ blur : 'blurCallback($event)' }">

<script>
$scope.blurCallback = function(evt) {
alert('Goodbye. Input content is: ' + evt.target.value);
};
</script>

<textarea
        ui-keypress="{13:'keypressCallback($event)'}">
</textarea>