我对 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 滑块和插件都带有按钮和控制器,但它们会自动播放图像,如果我禁用自动播放,它们不会在刷新时更改横幅/背景。
我只希望图像/背景在刷新时随机更改或在单击上一个/下一个按钮时更改,但我不知道如何实现这一点。