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

Posted 2023-02-25

【中文标题】为旋转横幅添加下一个和上一个按钮

【英文标题】：Add Next and Prev Buttons To Rotating Banner

【发布时间】：2012-09-20 15:04:11

【问题描述】：

我对 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  title="" src="images/icn_nav-arrow2.png" /></span>
<span id="next"><img  title="" src="images/icn_nav-arrow.png" /></span>
</div>
</div>

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

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

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

【问题讨论】：

你可以给你的横幅和按钮的html

您想要另一个随机图像还是您希望在单击下一个/上一个时图片按顺序旋转？

我基本上想要只在刷新或点击时更改图像的旋转横幅。我在上面发布的那个脚本是我通过浏览找到的，它在刷新时更改图像效果很好，但没有带有 prev/next 按钮。还有一件事，该脚本操纵背景图像，尽管我认为如果我只有 图像并使其旋转会更好。

【参考方案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>

---

【讨论】：

谢谢kgiff，上一个/下一个按钮已经可以使用了。但是有没有办法在点击时将它们定向到下一个或上一个图像？现在，他们所做的是在单击时随机旋转图像，这意味着如果我单击下一个并返回上一个，它不会显示上一个图像，而是随机选择一个图像来显示或有时显示相同的图像。单击下一个/上一个时，我想按顺序旋转图像。或者如果它更容易，也许我也应该在刷新页面时按顺序选择图像而不是随机选择？

修改为按顺序选择图像。希望您能以某种方式跟随。