1
我正在嘗試使用照片庫滑塊導航製作一個簡單的攝影網站，但是當我單擊以查看下一張圖片時，瀏覽器會重新定位到頁面頂部。我在做什麼錯了，我該如何解決這個問題？先謝謝你！JavaScript圖片庫幻燈片
的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">•</li>
<li class="bullet">•</li>
<li class="bullet">•</li>
<li class="bullet">•</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);