1
JQueryを初めて使用しているので、ナビゲーションボタン付きの単純なスライダーを作成して最近練習していました。非常に遅いスライダーナビゲーター
スライダ全体が正しく動作していますが、ナビゲーションボタンの応答が非常に遅いです。私が最初にそれらをクリックするとき、私はそれらを応答させるためにそれらを2回クリックする必要があります。コンソールにエラーはありません。ナビゲーションボタンの応答時間を除いて、すべてが正しく機能しています。
ありがとうございました。
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>
ありがとう、あなた友人。出来た。どうもありがとうございました。 –