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在刷新时更改背景图像，我希望它就像那样。我添加了“slide_control”，其中包含“prev”和“next”按钮，我希望他们做的是在点击时更改#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>

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

1 个答案: