На данный вопрос уже ответили:
Здравствуйте, не получается перейти с первой картинки на последнюю. Проблема не в slideRight() а в slideLeft() . с первой картинки перейти на последнюю .
$(function () {
var width = 920; var animationSpeed = 1000; var pause = 3000; var currentSlide = 1; var currentminSlide = -1;
var $slider = $("#slider"); var $sliderContainer = $slider.find(".slides"); var $slides = $sliderContainer.find(".image"); var $butright = $("#next"); var $butleft = $("#prev");
var interval;
function startSlider() { interval = setInterval(function () { $sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () { currentSlide++; if (currentSlide == $slides.length) { currentSlide = 1; $sliderContainer.css('margin-left', 0); } }); }, pause); } function stopSlider() { clearInterval(interval); }
//mouse hower $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider); startSlider();
function slideRight() {
$sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
currentSlide++;
if (currentSlide == $slides.length) {
currentSlide = 1;
$sliderContainer.css('margin-left', 0);
}
});
}
function slideLeft() {
$sliderContainer.animate({ 'margin-left': '+=' + width }, animationSpeed, function () {
currentSlide--;
if (currentSlide == $slides.length) {
currentSlide = -1;
}
});
}
//next slide
$($butright).click(function () {
stopSlider();
slideRight();
startSlider();
});
//previous slide
$($butleft).click(function () {
stopSlider();
slideLeft();
startSlider();
});
});
body, html { margin: 0; padding: 0; }
slider {width: 920px; height: 500px; margin: auto; overflow: hidden; background: #4b6f8a; }
slider .slides {display: block; width: 7700px; height: 700px; margin: 0; padding: 0; }
slider .image {float: left; list-style-type: none; width: 920px; height: 500px; }
img { width: 100%; }
<button id="prev">prev</button>
<button id="next">next</button>
Как работает Ваш код (кратко): срабатывает анимация, после этого сразу идет условие "а текущий элемент последний?", если да - то перемотай к первому. Получается что при переходе на последний слайд анимация срабатывает, после чего сразу идет переход на первый слайд, чтобы этого не было, нужно сначала вычислить новый индекс и проверить какой слайд. Исправленный вариант.
Сборка персонального компьютера от Artline: умный выбор для современных пользователей