Question

我有一个jQuery滑块，可以从左到右循环显示图像。滑块的左侧和右侧还有按钮，用户可以根据需要手动滚动图像。

我遇到的问题是，如果多次点击这些按钮，图像将滑出页面，这是因为事件在列表的左侧属性超出其边界之前被触发。

我正在尝试使用变量阻止用户通过检查当前动画是否已经发生来触发这些事件，但事件似乎仍然会触发。这是一个显示问题的工作jsFiddle。 http://jsfiddle.net/25tt5vmp/10/

这是jQuery函数：

$(document).ready(function () {


    var myTimer = setInterval(slide, 2000);
    var blockedSlider = false;

    function slide() {
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left <= -800) {


                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:first');
                $('#sliderList').children('li:first').remove();
                $('#sliderList').append(slide);
                $('#sliderList').animate({ left: "-=400px" }, "slow", "swing");

            }
            else {
                $('#sliderList').animate({ left: "-=400" }, "slow", "swing");
            }

    }

    $('#sliderLeft').click(function () {
        if (blockedSlider == false) {
            blockedSlider = true;
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left <= -800) {
                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:first');
                $('#sliderList').children('li:first').remove();
                $('#sliderList').append(slide);
                $('#sliderList').animate({ left: "-=400px" }, "slow", "swing");
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            else {
                $('#sliderList').animate({ left: "-=400" }, "slow", "swing");
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            blockedSlider = false;
        }
    });

    $('#sliderRight').click(function () {
        if (blockedSlider == false) {
            blockedSlider = true;
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left >= 0) {
                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:last');
                $('#sliderList').children('li:last').remove();
                $('#sliderList').prepend(slide);
                $('#sliderList').animate({ left: "+=400px" }, "slow", "swing");
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);

            }
            else {
                $('#sliderList').animate({ left: "+=400" }, "slow", "swing");
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            blockedSlider = false;
        }
    });

});

我的HTML：

<div  id="sliderOuterWrapper">
        <div id="sliderWrapper">

            <a id="sliderLeft"  ><</a>
            <a id="sliderRight" >></a>
            <ul id="sliderList">
                <li class="sliderItem first">
                    <div><img src="" /></div>
                </li>
                <li class="sliderItem second">
                    <div><img src="" /></div>
                </li>
                <li class="sliderItem third">
                    <div><img src="" /></div>
                </li>
                <li class="sliderItem fourth">
                    <div><img src="" /></div>
                </li>
                <li class="sliderItem fifth">
                    <div><img src="" /></div>
                </li>
            </ul>

        </div>
    </div>

CSS：

* { margin: 0; padding: 0; }
#sliderWrapper { width: 400px; height: 350px; overflow: hidden; position:relative;}
#sliderList  { list-style: none; left: 0px; position:absolute; width:200000em;}
.sliderItem { float: left; background-color:black; width: 400px; height: 350px;}
.sliderItem.first { background-color:red; }
.sliderItem.second { background-color:blue; }
.sliderItem.third { background-color:yellow; }
.sliderItem.fourth { background-color:green; }
#sliderLeft  { position: absolute; font-size: 63px; top:39%; z-index: 10;}
#sliderRight { position: absolute; font-size: 63px; top:39%; z-index: 10; right: 0px;}
#sliderLeft:hover,
#sliderRight:hover { cursor: pointer; }

如果当前动画已经发生，如何停止触发这些事件？

Answer 1

请在动画函数回调中将blockSlider设置为false

 $('#sliderLeft').click(function () {
        if (blockedSlider == false) {
            blockedSlider = true;
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left <= -800) {
                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:first');
                $('#sliderList').children('li:first').remove();
                $('#sliderList').append(slide);
                $('#sliderList').animate({ left: "-=400px" }, "slow", "swing",function(){
                    blockedSlider = false
                 });
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            else {
                $('#sliderList').animate({ left: "-=400" }, "slow", "swing",function(){
                    blockedSlider = false
                 });
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }

        }
    });

使用块变量来停止多个事件的运行

1 个答案: