1
因爲我是JQuery的新手，我最近正在通過創建一個帶有導航按鈕的簡單滑塊來練習它。滑動導航工作非常緩慢
整個滑塊工作正常，但導航按鈕響應非常緩慢。當我第一次點擊它們時，我需要點擊它們兩次以使它們響應。控制檯上沒有錯誤。除導航按鈕響應時間外，所有內容都正常工作。
感謝您提前給予幫助。
var slides = document.getElementsByClassName('slide');
var slider_count = 1;
var offset_value;
start();
function left() {
slider_count--;
if (slider_count < 0) {
slider_count = slides.length - 1;
}
offset_value = slides[slider_count].offsetLeft;
$("#wrapper").animate({
scrollLeft: offset_value
}, 1000);
}
function right() {
if (slider_count >= slides.length) {
slider_count = 0;
}
offset_value = slides[slider_count].offsetLeft;
$("#wrapper").animate({
scrollLeft: offset_value
}, 1000);
slider_count++;
}
function start() {
if (slider_count == slides.length) {
slider_count = 0;
}
offset_value = slides[slider_count].offsetLeft;
slider_count++;
$("#wrapper").animate({
scrollLeft: offset_value
}, 1000);
setTimeout(start, 3000);
}html,
body,
body * {
margin: 0;
padding: 0;
}
#wrapper {
height: 300px;
white-space: nowrap;
overflow: hidden;
}
.slide {
display: inline-block;
width: 100%;
height: 100%;
}
#slide-option-1 {
background-color: #808080;
}
#slide-option-2 {
background-color: green;
}
#slide-option-3 {
background-color: blue;
}
#main {
position: relative;
}
.nav {
position: absolute;
cursor: pointer;
}
#nav-1 {
left: 10px;
top: 45%;
}
#nav-2 {
right: 10px;
top: 45%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<a id="nav-1" onclick="left()" class="nav">Left</a>
<div id="wrapper">
<div id="slide-option-1" class="slide"></div>
<div id="slide-option-2" class="slide"></div>
<div id="slide-option-3" class="slide"></div>
</div>
<a id="nav-2" class="nav" onclick="right()">Right</a>
</div>
謝謝你的朋友。有效。非常感謝你。 –