我正在尝试创建“上一个”和“下一个”按钮,这些按钮在嵌入式Google地图图像上的不同位置之间循环,但是将“上一个”按钮隐藏在第一个位置,并且使“下一个”按钮在最后一个位置消失节目。
我知道添加一个名为“ hidden”的CSS类可以解决问题,但是我不确定将其放置在何处以及如何放置。
这是我的HTML代码。iframe元素是google maps,我为其指定了一个ID“ mappy”,以便在JavaScript中更轻松地选择它。地图下方是两个按钮。
这是我的JavaScript代码。当前,下一个和上一个按钮仅在每个位置之间循环。
var main_map = document.getElementById('mappy');
var maps = [
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7961373.37326689!2d96.9825121578134!3d13.010860368647212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x304d8df747424db1%3A0x9ed72c880757e802!2sThailand!5e0!3m2!1sen!2sus!4v1598948055475!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12436315.314415561!2d166.3019164867038!3d-40.448493377535335!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d2c200e17779687%3A0xb1d618e2756a4733!2sNew%20Zealand!5e0!3m2!1sen!2sus!4v1598944334239!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29616594.651652496!2d115.15555667021819!3d-25.02365472591425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2b2bfd076787c5df%3A0x538267a1955b1352!2sAustralia!5e0!3m2!1sen!2sus!4v1598944469264!5m2!1sen!2sus'
];
var i = 0; // Current Image Index
var a;
function prev() {
if (i <= 0) i = maps.length;
i--;
return setImg();
}
function next() {
if (i >= maps.length - 1) i = -1;
i++;
return setImg();
}
function setImg() {
return main_map.setAttribute('src', maps[i]);
}
<p><iframe id="mappy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></p>
<div class="buttons">
<button class="button" id="prev" onclick="prev()">← Previous</button>
<button class="button" id="next" onclick="next()">Next →</button>
</div>
您可以检查索引,如果索引为0,则隐藏上一个按钮,如果索引为4,则隐藏下一个按钮。您可以使用toggleclass隐藏按钮
if (i = 0) { //if index is 0, toggle class hide
classList.toggle("hide");
else {
classList.toggle(“show”); //if the index is not 0, toggle class show
}
}
if (i = 4) { //if index is 4, toggle class hide
classList.toggle("hide");
else {
classList.toggle(“show”); //if the index is not 4, toggle class show
}
}
编辑:添加了一个嵌套的else语句来切换类显示,如果索引不是0或4。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句