我从5个元素创建了一个滑块,但无法理解如何循环此滑块。当我单击向左勾选时,我需要滑块从右向左继续移动,当我单击向右勾选时,即使最后一张幻灯片已经显示,我也需要。
Jsfiddle与要测试的代码 - Jsfiddle
我的HTML:
webSocketServerWrapper.start(PORT);
这是我的JS
<div class="slider">
<div class="slider__viewport">
<button class="slider__btn slider__btn--left" type="button" name="button"
@click="previousSlide">
</button>
<ul class="slider__slides" data-current="0">
<li class="slider__slide slider__slide--hiddenLeft">
<img class="slider__img" src="../../img/slide1.png" alt="1">
<h3 class="slider__title">
Левый слайд
</h3>
<span class="slider__date">21 февраля 2017</span>
</li>
<li class="slider__slide slider__slide--left">
<img class="slider__img" src="../../img/slide2.png" alt="1">
<h3 class="slider__title">
Левый слайд
</h3>
<span class="slider__date">25 февраля 2017</span>
</li>
<li class="slider__slide slider__slide--current">
<img class="slider__img" src="../../img/slide3.png" alt="2">
<h3 class="slider__title">
Текущий слайд
</h3>
<span class="slider__date">27 февраля 2017</span>
</li>
<li class="slider__slide slider__slide--right">
<img class="slider__img" src="../../img/slide4.png" alt="3">
<h3 class="slider__title">
Правый слайд
</h3>
<span class="slider__date">28 февраля 2017</span>
</li>
<li class="slider__slide slider__slide--hidden">
<img class="slider__img" src="../../img/slide5.png" alt="4">
<h3 class="slider__title">
Скрытый слайд
</h3>
<span class="slider__date">29 февраля 2017</span>
</li>
</ul>
<button class="slider__btn slider__btn--right" type="button" name="button"
@click="nextSlide">
</button>
</div>
</div>
答案 0 :(得分:0)
检查当前滑动值是否超出界限的条件总是返回true,导致滑动不变。
另外,请使用分号。请。 :P
请注意,我更改了页面和图像来源的格式;这是出于调试目的,如果需要,您可以将其更改回来。我还必须将滑动更改为出现/消失以进行测试(Stack Overflow提供的测试环境的结果窗口太小,无法在测试时查看结果)。
var currentSlide=1;
$('.slider__slides').children().eq(currentSlide-1).siblings().hide();
$('.slider__btn--left').click(function() {
var slideWidth = 620;
var currentSlide = parseInt($('.slider__slides').data('current'));
currentSlide++;
var size = $('.slider__slides').children().length;
if (currentSlide > size) {
currentSlide = 1;
}
console.clear();
console.log(currentSlide);
$('.slider__slides').children().eq(currentSlide-1).show();
$('.slider__slides').children().eq(currentSlide-1).siblings().hide();
$('.slider__slides').data('current', currentSlide);
});
$('.slider__btn--right').click(function() {
var slideWidth = 620;
var currentSlide = parseInt($('.slider__slides').data('current'));
currentSlide--;
var size = $('.slider__slides').children().length;
if (currentSlide <= 0) {
currentSlide = size;
}
console.clear();
console.log(currentSlide);
$('.slider__slides').children().eq(currentSlide-1).show();
$('.slider__slides').children().eq(currentSlide-1).siblings().hide();
$('.slider__slides').data('current', currentSlide);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="slider">
<div class="slider__viewport">
<button class="slider__btn slider__btn--left" type="button" name="button">Left
</button>
<button class="slider__btn slider__btn--right" type="button" name="button">Right
</button>
<ul class="slider__slides" data-current="0">
<li class="slider__slide slider__slide--hiddenLeft">
<img class="slider__img" src="http://images.huffingtonpost.com/2012-08-18-GorillaSilverback6.jpg" alt="1" width="100" height="100">
<h3 class="slider__title">
Левый слайд
</h3>
<span class="slider__date">21 февраля 2017</span>
</li>
<li class="slider__slide slider__slide--left">
<img class="slider__img" src="https://www.w3schools.com/css/trolltunga.jpg" alt="2" width="100" height="100">
<h3 class="slider__title">
Левый слайд
</h3>
<span class="slider__date">25 февраля 2017</span>
</li>
<li class="slider__slide slider__slide--current">
<img class="slider__img" src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="3" width="100" height="100">
<h3 class="slider__title">
Текущий слайд
</h3>
<span class="slider__date">27 февраля 2017</span>
</li>
<li class="slider__slide slider__slide--right">
<img class="slider__img" src="http://www.planwallpaper.com/static/images/image-slider-2.jpg" alt="4" width="100" height="100">
<h3 class="slider__title">
Правый слайд
</h3>
<span class="slider__date">28 февраля 2017</span>
</li>
<li class="slider__slide slider__slide--hidden">
<img class="slider__img" src="http://www.planwallpaper.com/static/images/wallpaper-sunset-images-back-217159.jpg" alt="5" width="100" height="100">
<h3 class="slider__title">
Скрытый слайд
</h3>
<span class="slider__date">29 февраля 2017</span>
</li>
</ul>
</div>
</div>
&#13;