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>
谢谢你的朋友。有效。非常感谢你。 –