Question

创建幻灯片时，经常点击下一个按钮时会遇到问题。请建议任何解决方案。 .....................

这是链接：

＆安培;这是原始代码：

            <!doctype html>
            <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="description" content="">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>Untitled</title>
                    <link rel="author" href="humans.txt">
                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
                </head>
                <body>
            <style>
            main{width:300px; height:200px; float:left; overflow:hidden; position:relative;}
                ul.slider{left:0;height:200px; display:inline-block; position:relative; padding:0; margin:0;}
                .slider li{width:200px; height:200px; margin:0 50px; display:inline-block; background-color:red; font-weight:bold; font-size:14px; line-height:200px; text-align:center; list-style:none; color:#fff;}
                .prev, .next{z-index:99999; font-size:11px; font-weight:bold; color:#333; top:40%; position:absolute; left:0; cursor:pointer;}
                .next{left:270px;}

            </style>
            <main>
            <span class="prev">PREV</span>
                <ul class="slider">

                </ul>
                <span class="next">NEXT</span>
                  </main>  


                    <script type="text/javascript">
            for (var slideCount = 1; slideCount <= 8; slideCount++) {
                $('.slider').append('<li class="slide'+slideCount+'">This is slide '+slideCount+'</li>')
            };

            var boxWidth=$('.slider li').outerWidth(true);
            $('.slider').width(boxWidth * 8);
            $('.slider li:odd').css('background-color','green');

            $('.next').on('click',function(){
                var leftSpace=parseInt($('.slider').css('left'), 10);
                $('.slider').animate({left:leftSpace-boxWidth},1000);
                return false;
            });
            $('.prev').on('click',function(){
                var leftSpace=parseInt($('.slider').css('left'), 10);
                $('.slider').animate({left:leftSpace+boxWidth},1000);
                return false;
            })

                    </script>


                </body>
            </html>

Answer 1

如this

之类的做法

<强>的jQuery

for (var slideCount = 1; slideCount <= 8; slideCount++) {
    $('.slider').append('<li class="slide' + slideCount + '">This is slide' + slideCount + '</li>')
};

var boxWidth = $('.slider li').outerWidth(true);
$('.slider').width(boxWidth * 8);
$('.slider li:odd').css('background-color', 'green');
var animating = false;
$('.next').on('click', function () {
    if(!animating){
        animating = true;
        var leftSpace = parseInt($('.slider').css('left'), 10);
        $('.slider').animate({
            left: leftSpace - boxWidth
        }, 1000,function(){animating = false});
        return false;
    }
});
$('.prev').on('click', function () {
    if(!animating){
        var leftSpace = parseInt($('.slider').css('left'), 10);
        $('.slider').animate({
            left: leftSpace + boxWidth
        }, 1000,function(){animating = false});
        return false;
    }
})

Answer 2

更新了您的小提琴：Fiddle Link

您需要在移动到下一个或上一个时检查动画是否已停止。这是JS代码。如果有效，请告诉我。

var bool = false;
for (var slideCount = 1; slideCount <= 8; slideCount++) {
    $('.slider').append('<li class="slide' + slideCount + '">This is slide' + slideCount + '</li>')
};

var boxWidth = $('.slider li').outerWidth(true);
$('.slider').width(boxWidth * 8);
$('.slider li:odd').css('background-color', 'green');

$('.next').on('click', function () {
    if(!bool) {
        var leftSpace = parseInt($('.slider').css('left'), 10);
        $('.slider').animate({
            left: leftSpace - boxWidth
        }, 1000, function(){
            bool = false;
        });
        bool = true;
    }
    return false;
});
$('.prev').on('click', function () {
    if(!bool) {
        var leftSpace = parseInt($('.slider').css('left'), 10);
        $('.slider').animate({
            left: leftSpace + boxWidth
        }, 1000, function(){
            bool = false;
        });
        bool = true;
    }
    return false;
})

在创建幻灯片时遇到问题

2 个答案: