由于我是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>
答案 0 :(得分:2)
使用slider_count
初始化0
。
var slides = document.getElementsByClassName('slide');
var slider_count = 0;
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() {
slider_count++;
if (slider_count >= slides.length) {
slider_count = 0;
}
offset_value = slides[slider_count].offsetLeft;
$("#wrapper").animate({
scrollLeft: offset_value
}, 1000);
}
function start() {
slider_count++;
if (slider_count >= slides.length) {
slider_count = 0;
}
offset_value = slides[slider_count].offsetLeft;
$("#wrapper").animate({
scrollLeft: offset_value
}, 1000);
setTimeout(start, 3000);
}
&#13;
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%;
}
&#13;
<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>
&#13;