为旋转横幅添加下一个和上一个按钮

Question

我对 JS 和 Jquery 不了解，所以我真的希望这里有人可以帮助我。 我希望我的横幅在页面加载或刷新时更改图像，我找到了以下代码：

---

<script type="text/javascript">
window.onload = function () {
var random = document.getElementById('random');
var pictures = new Array('images/icn_slide-1.jpg','images/icn_slide-2.jpg','images/icn_slide-1.jpg','images/icn_slide-2.jpg');
var numPics = pictures.length;
if (document.images) {
    var chosenPic = Math.floor((Math.random() * numPics));
    random.style.background = 'url(' + pictures[chosenPic] + ')';
}
}

上面的脚本工作得很好（每次刷新都会改变背景图像）但是现在我想添加一个上一个和下一个按钮（实际上我已经这样做了），这样当观众点击下一个/上一个时它会显示另一个图像。有没有一种简单的方法可以做到这一点？如何使我的下一个和上一个按钮起作用？任何帮助将不胜感激。谢谢！

---

这是我的 html 中唯一的内容：

<div id="random" style="width: 1399px; height:515px; margin:auto;">
<div id="slide_control" class="clearfix">
<span id="prev"><img alt="" title="" src="images/icn_nav-arrow2.png" /></span>
<span id="next"><img alt="" title="" src="images/icn_nav-arrow.png" /></span>
</div>
</div>

到目前为止，在刷新时更改背景图像的是#random div，我希望它就是这样。我添加了包含“prev”和“next”按钮的“slide_control”，我希望它们在单击它们时也更改#random 的背景图像。

大多数 JS/JQquery 滑块和插件都带有按钮和控制器，但它们会自动播放图像，如果我禁用自动播放，它们不会在刷新时更改横幅/背景。

我只希望图像/背景在刷新时随机更改或在单击上一个/下一个按钮时更改，但我不知道如何实现。

Answer 1

这是您要求的基本示例：

---

<script type="text/javascript">
function rotateImage(idx) {
    var random = document.getElementById('random');

    if (document.images) {
        random.style.background = 'url(' + pictures[idx] + ')';
        selectedImage = idx;
    }
}

function getNext() {
      var nextImage = selectedImage + 1;
      if (selectedImage >= numPics) {
          nextImage = 0;
      }
      rotateImage(nextImage);
}

function getPrev() {
      var prevImage = selectedImage - 1;
      if (selectedImage < 0) {
          selectedImage = numPics -1;
      }
      rotateImage(prevImage);
}

var pictures = new Array('images/icn_slide-1.jpg','images/icn_slide-2.jpg','images/icn_slide-1.jpg','images/icn_slide-2.jpg');
var numPics = pictures.length;
var selectedImage = null;

window.onload = function () {
     var chosenPic = Math.floor((Math.random() * numPics));
     rotateImage(chosenPic);
     document.getElementById('next').onclick = getNext;
     document.getElementById('prev').onclick = getPrev;
}
</script>

---