На данный вопрос уже ответили:
Здравствуйте, не получается перейти с первой картинки на последнюю. Проблема не в 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>
Как работает Ваш код (кратко): срабатывает анимация, после этого сразу идет условие "а текущий элемент последний?", если да - то перемотай к первому. Получается что при переходе на последний слайд анимация срабатывает, после чего сразу идет переход на первый слайд, чтобы этого не было, нужно сначала вычислить новый индекс и проверить какой слайд. Исправленный вариант.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Суть вопроса такова - можно ли как-то сделать событие чтобы когда один элемент находится над другим срабатывало событие?
Сообщение он получает, alert выполняет (вставил для отладки), но вот новые сообщения на страницу не выводит
Штука следующая, есть очень много различных плагинов мозаек, коллажей для реализации вот такой штуки:
Для своего небольшого приложения на meteorjs я хочу сделать бесконечную прокрутку