Javascript 单击按钮时播放淡出/淡出滑块

我已经创建了一个淡出/淡出滑块。它在自动上工作。我想通过单击“下一步/上一步”按钮来播放滑块

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>

脚本

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);
});

---

您的问题在这一行：

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

您的

当前

变量始终设置为

1

希望这会有帮助

---

更新

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);
});

要移动“上一个”和“下一个”，您需要检查单击了哪个按钮，因为您只对这两个按钮使用了一个处理程序，请参阅下面的代码：

您可以将单击的元素添加到自动滑动功能（元素）

完整代码

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);
});

---

现在点击按钮会发生什么？我已经尝试过，但不清楚如何在点击按钮时全局增加和减少当前值。@DhavalMarthak:var timer=setInterval（自动滑动，速度）；对不起，我把它纠正了。检查更新代码您的函数具有半列。请先更正代码。我想当单击上一个按钮时，它应该转到上一个图像。您必须检查条件检查，因为现在您只使用按钮单击，所以您必须检查是否单击了下一个按钮或上一个按钮。亲爱的@Dhaval Marthak，我被困在这里，这就是我问这个问题的原因。实际上我在编程方面不是很完美。谢谢dhaval的回答…但请解释一下元素参数在这里是如何工作的…您刚刚定义了它，但没有传递任何元素button@RakeshKumar你又看到我的更新了吗？你会有主意的