这是我第一次使用stackoverflow,我真的希望有人可以提供帮助。我在编码方面相当新手,所以我希望我的查询很容易解决。 我创建了一个简单的javascript图库,如果你单击左箭头或右箭头,它会循环显示我的数组列表中的下一个图像。我也有快速链接跳转到此列表中的特定图像。如何获取我的下一个/后一个链接然后继续,以显示当前所选图像的下一个图像?例如,如果我跳转到图库图像3,那么它将在列表库图像4中显示下一个图像,而不是图库图像2.
以下是我的代码示例。
非常感谢您的帮助。
这是我的剧本:
var num=0;
imgArray = [
['../00_assets/gallery/work_00.jpg','Gallery', '1 of 6',],
['../00_assets/gallery/work_01.jpg','Gallery', '2 of 6',],
['../00_assets/gallery/work_02.jpg','Gallery', '3 of 6'],
['../00_assets/gallery/work_03.jpg','Gallery', '4 of 6'],
['../00_assets/gallery/work_04.jpg','Gallery', '5 of 6'],
['../00_assets/gallery/work_05.jpg','Gallery', '6 of 6'],
]
function slideshow(slide_num) {
document.getElementById('mypic').src=imgArray[slide_num][0];
document.getElementById('mypic').alt=imgArray[slide_num][1];
document.getElementById('number').innerHTML=imgArray[slide_num][2];
}
function slideshowUp() {
num++;
num = num % imgArray.length;
slideshow(num);
}
function slideshowBack() {
num--;
if (num < 0) {num=imgArray.length-1;}
num = num % imgArray.length;
slideshow(num);
}
这是我的HTML (我已经拿出了似乎不相关的内容)
<div align="left">
<!-- First image in array list is here -->
<img src="../00_assets/gallery/work_00.jpg" id="mypic" name="mypic" alt="Gallery">
<!-- Previous link is here -->
<a href="#" onclick="slideshowBack(); return false;"> ← </a>
<!-- First image number is here -->
<div id="number">1 of 9</div>
<!-- Next link is here -->
<a href="#" onclick="slideshowUp(); return false;"> → </a>
<!-- Three quicklinks are link is here -->
<a href="#" onclick="slideshow(0); return false;">Quicklink 1</a> |
<a href="#" onclick="slideshow(2); return false;">Quicklink 2</a> |
<a href="#" onclick="slideshow(4); return false;">Quicklink 3</a> |
非常感谢你。
答案 0 :(得分:1)
每当您更改当前幻灯片时,都应更新num
变量。
然后,当点击快速链接时,它将包含其他方法(slideshowUp
和slideshowBack
)的当前幻灯片,并按预期保持导航。
换句话说:
function slideshow(slide_num) {
num = slide_num; // add this line
document.getElementById('mypic').src=imgArray[slide_num][0];
document.getElementById('mypic').alt=imgArray[slide_num][1];
document.getElementById('number').innerHTML=imgArray[slide_num][2];
}