Jquery 在创建sildeshow时面临问题_Jquery

Jquery 在创建sildeshow时面临问题

jquery

Jquery 在创建sildeshow时面临问题,jquery,Jquery,在创建幻灯片放映时，经常单击“下一步”按钮会遇到问题。请提出解决方案。以下是链接： &以下是原始代码： <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""

在创建幻灯片放映时，经常单击“下一步”按钮会遇到问题。请提出解决方案。

以下是链接：

&以下是原始代码：

            <!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>


无标题
主{宽度：300px；高度：200px；浮动：左；溢出：隐藏；位置：相对；}
滑块{左：0；高度：200px；显示：内联块；位置：相对；填充：0；边距：0；}
.slider li{宽度：200px；高度：200px；边距：0 50px；显示：内联块；背景色：红色；字体重量：粗体；字体大小：14px；线条高度：200px；文本对齐：居中；列表样式：无；颜色：#fff；}
.prev、.next{z-index:99999；字体大小：11px；字体大小：粗体；颜色：#333；顶部：40%；位置：绝对；左侧：0；光标：指针；}
.next{左：270px；}
上


下一个
对于（var slideCount=1；slideCount执行以下操作如何
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;
    }
})

for（var slideCount=1；slideCount更新了您的小提琴：
您需要检查动画是否在移动到下一个或上一个时停止。这是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;
})

var bool=false；
对于（var slideCount=1；slideCount），请定义“问题”是什么，您遇到的不希望出现的影响或行为是什么，并更新问题的标题以匹配该问题