играть слайдер fadein / fadeout по нажатию кнопки

0

Я создал слайдер fadein/Fadeout. Это работает на авто. Я хочу играть слайдер, нажимая на кнопки next/prev.

HTML

<section class="wrapper">
<ul class="slider">
    <li><img src="http://www.tylershields.com/images/gallery/art_gallery.jpg" alt="" /></li>
    <li><img src="http://www.goa-tourism.com/images/photogallery/1287634889_pid_kala%20academy%20art%20gallery.jpg" alt="" /></li>
    <li><img src="http://www.magnoliabakery.com/uploads/GalleryImageModel/105/filemask/mag1003_magnolia_fall_14original.gallery.jpg" alt="" /></li>
    <li><img src="http://www.lancasterconventioncenter.com/_images/_gallery/gallery15.jpg" alt="" /></li>
</ul>
<button data-dir="prev">Prev</button>
<button data-dir="next">Next</button>
</section>

CSS

*               {margin:0; padding:0;}
.wrapper        {width:800px; margin:0 auto; max-width:100%;}
.slider         {position:relative;}
.slider li      {position:absolute; top:0; left:0; list-style:none; width:100%; opacity:0;}
.slider li img              {width:100%;}
.slider li:first-child      {position:relative; display:block; opacity:1;}

скрипт

var current = 0,
    elem    = $('.slider li'),
    slides  = $('.slider li').length,
    speed   = 3000,
    transSpeed = 1000;

function autoSlide(){

    current = (current == (slides-1)) ? 0 : +1;

    $('.slider').find('li')
        .filter(':eq('+ current +')').addClass('current').animate({'opacity':1}, transSpeed)
        .siblings('li').removeClass('current').animate({'opacity':0}, transSpeed);
    };

var timer = setInterval(autoSlide, speed);

$('button').on('click', function(){
    clearInterval(timer);
     autoSlide();
     timer =setInterval(autoSlide, speed);
});

Fiddle Demo

  • 0
    что происходит при нажатии кнопки?
  • 0
    Я пытался, но не ясно, как глобально увеличивать и уменьшать значение тока при нажатии кнопки.
Показать ещё 3 комментария
Теги:
slider

1 ответ

2

Ваша проблема в этой строке:

current = (current == (slides-1)) ? 0 : current + 1 // you were doing +1 which will always return 1

current переменной всегда было 1

Надеюсь, это поможет!

Fiddle Demo

Обновить

Чтобы переместить предыдущий и следующий, вам нужно проверить, какая кнопка нажата, поскольку вы используете только один обработчик для обоих, см. Ниже код:

Вы можете получить элемент autoSlidefunction(element) для функции autoSlidefunction(element)

Полный код

function autoSlide(element) {
    var clicked = $(element).text().toLowerCase().trim(); // Get next or prev
    if (clicked == "next")
        current = (current == (slides - 1)) ? 0 : current + 1; // Current will be incremented
    else
        current = (current == 0) ? 0 : current - 1; // decrease in current
    $('.slider').find('li')
        .filter(':eq(' + current + ')').addClass('current').animate({
            'opacity': 1
        }, transSpeed)
        .siblings('li').removeClass('current').animate({
            'opacity': 0
        }, transSpeed);
};

var timer = setInterval(autoSlide, speed);

$('button').on('click', function () {
    clearInterval(timer);
    autoSlide($(this)); // to get clicked element to autoSlide()
    timer = setInterval(autoSlide, speed);
});

Updated Fiddle

Поделиться
  • 0
    Я хочу, чтобы предыдущая кнопка была нажата, чтобы перейти к предыдущему изображению.
  • 0
    Вы должны проверить проверку состояния для этого, так как сейчас вы используете только нажатие кнопки, поэтому вы должны проверить, нажата ли следующая или предыдущая.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню