Question

我正在尝试制作一个带有照片库滑块导航的简单摄影网站，但当我点击查看下一张图片时，浏览器会重新定位到页面顶部。我做错了什么，如何解决这个问题？提前谢谢！

html代码：

<div class="slider_nav">
<a href="#" class="left_arrow"><img src="./assets/images/arrow_left.png" width="50px"></i>
</a>
<ul class="bullets">
<li class="bullet current_bullet">&bull;</li>
<li class="bullet">&bull;</li>
<li class="bullet">&bull;</li>
<li class="bullet">&bull;</li>
</ul>
<a href="#" class="right_arrow"><img src="./assets/images/arrow_right.png" width="50px"></a>
</div>
</div>

javascript代码：

var everything = function () {

$(".right_arrow").click(function () {
var currentSlide = $(".current_slide");
var nextSlide = currentSlide.next();
var currentBullet = $(".current_bullet");
var nextBullet = currentBullet.next();

if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextBullet = $(".bullet").first();
}

currentSlide.fadeOut(800).removeClass("current_slide");
nextSlide.fadeIn(800).addClass("current_slide");

currentBullet.removeClass("current_bullet");
nextBullet.addClass("current_bullet");
});


$(".left_arrow").click(function () {
    var currentSlide = $(".current_slide");
    var prevSlide = currentSlide.prev();


var currentBullet = $(".current_bullet");
var prevBullet = currentBullet.prev();

if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevBullet = $(".bullet").last();
}

currentSlide.fadeOut(800).removeClass("current_slide");
prevSlide.fadeIn(800).addClass("current_slide");

currentBullet.removeClass("current_bullet");
prevBullet.addClass("current_bullet");
});

};
$(document).ready(everything);

Answer 1

你必须把

event.preventDefault()

处理程序中的

单击left_arrow和right_arrow。

阅读本文： https://www.w3schools.com/jquery/event_preventdefault.asp

JavaScript图片库幻灯片

1 个答案: