javascript - 更简单的 Jquery Slider 代码改进

Question

我使用 Jquery 编写了一个简单的“上一个-下一个”按钮 slider ，下一个按钮工作正常，但是当我们单击“上一个”按钮时，它会快速多次，而不等待动画完成并开始显示空白...

fiddle :- https://jsfiddle.net/pnjcr6sw/

代码:-

CSS

<style>
    *{ margin:0; padding:0; box-sizing:border-box;}
    .slider { width:320px; overflow:hidden; margin:50px 0 0 50px; max-width:100%;}
    .slider ul { float:left;}
    .slider li { float:left; list-style:none;}
    .pager{ float:left; margin:5px;}
    .pager span { width:15px; height:15px;background:#000; border-radius:50%; display:inline-block; margin:0 5px; cursor:pointer; color:#fff;}
    .pager span.active { background-color:#f00;}
</style>

HTML

<div class="slider">
    <ul>
        <li title="First"><img src="story1.jpg" alt=""></li>
        <li title="Second"><img src="story2.jpg" alt=""></li>
        <li title="Last"><img src="story3.jpg" alt=""></li>
    </ul>
    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>
</div>

JS

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function() {

        var slider_w = $('.slider').width();
        var total_li = $('.slider li').length
        var total_w = $('.slider').width()*total_li
        $('.slider ul').width(total_w);
        // counter

        // next button
        $('a.next').click(function(){
            $('.slider ul').animate({marginLeft:'-' + slider_w }, function(){
                $('.slider li:first').appendTo('.slider ul');
                $('.slider ul').css('margin-left','0');
            });
        });

        //prev button
        $('a.prev').click(function(){
            $('.slider li:last').prependTo('.slider ul')
            $('.slider ul').css('margin-left','-=' + slider_w )    
            $('.slider ul').animate({marginLeft:'+=' + slider_w})
        });
    });
</script>

Answer 1

只需检查您的动画是否仍在运行。

if( $('.slider ul').is(':animated') ) { ... }

然后添加 return; 以阻止上一个点击处理程序执行该操作。

$(document).ready(function() {

var slider_w = $('.slider').width();
var total_li = $('.slider li').length
var total_w = $('.slider').width()*total_li
$('.slider ul').width(total_w);
// counter

// next button
$('a.next').click(function(){
$('.slider ul').animate({marginLeft:'-' + slider_w }, function(){
	$('.slider li:first').appendTo('.slider ul');
	$('.slider ul').css('margin-left','0');
});
});

//prev button
$('a.prev').click(function(){
    if( $('.slider ul').is(':animated') ) {
        return;
    }
$('.slider li:last').prependTo('.slider ul')
$('.slider ul').css('margin-left','-=' + slider_w )	
$('.slider ul').animate({marginLeft:'+=' + slider_w})
});

});

*{ margin:0; padding:0; box-sizing:border-box;}
.slider { width:320px; overflow:hidden; margin:50px 0 0 50px; max-width:100%;}
.slider ul { float:left;}
.slider li { float:left; list-style:none;}
.pager{ float:left; margin:5px;}
.pager span { width:15px; height:15px;background:#000; border-radius:50%; display:inline-block; margin:0 5px; cursor:pointer; color:#fff;}
.pager span.active { background-color:#f00;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider">
<ul>
<li title="First"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li>
<li title="Second"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li>
<li title="Last"><img src="http://4.bp.blogspot.com/-8jO_wS_uLik/TdDQZh-4PrI/AAAAAAAAA6A/6pHEqZwFQdg/s320/Amazing+Building+Pictures+4.jpg" alt=""></li>
</ul>
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>