Question

我正在为我的网站制作缩略图滑块。 Slider使用jquery进行动画制作。当我单击箭头时，滑块移动到相应的侧面200px。现在，如果滑块已经是-200px，我单击左箭头两次滑块移动到+ 200px显示空白区域。理想情况下，这不应该发生，并且不应显示空白区域。但是，当快速连续调用movingThumbs函数时，会发生这种情况。如何防止这种情况发生。

这里是html代码

<div id="thumbnails">
<div class="thumbnailArrows">
    <img src="http://kimjoyfox.com/blog/wp-content/uploads/leftA.jpg" id="Tleft" />
</div>
<div id="window">
    <div id="divHolder">
        <div class="block1">

        </div>
        <div class="block2">

        </div>
        <div class="block3">

        </div>
        <div class="block4">

        </div>
        <div class="block5">

        </div>
        <div class="block6">

        </div>
        <div class="block7">

        </div>
    </div>
</div>
<div class="thumbnailArrows">
    <img src="http://kimjoyfox.com/blog/wp-content/uploads/rightA.jpg" id="Tright" />
</div>

这里是jquery代码

$(document).ready(function () {
//Hovering Over Thumbnail Navigation
$('.thumbnailArrows').unbind("click").click(function () {
    var whiches = $(this).children('img').attr('id');
    if (whiches == 'Tleft') {
        movingThumbs(2000, '+');
    } else {
        movingThumbs(2000, '-');
    }



    //Function for Thumbnails Moving
    function movingThumbs(speed, direction) {
        var currentLeft = $('#divHolder').position().left;
        //figure out how far to go left - only for right arrow
        var moving = $('#divHolder').width() - (Math.abs($('#divHolder').position().left) + $('#window').width());
        if (currentLeft == 0 && direction == '+') {
            //do nothing
        } else if (Math.abs($('#divHolder').position().left) + $('#window').width() >= $('#divHolder').width() && direction == '-') {
            //do nothing
        } else if (direction == '+' && currentLeft != 0) {
            $('#divHolder').animate({
                left: '+=200px',
            }, speed);
        } else {

            $('#divHolder').animate({
                left: '-=200px',
            }, speed);
        }
    }
});

}）;

链接到现场演示的jsfiddle： http://jsfiddle.net/dx4wkp61/1/

基于jquery的分区滑块不起作用

0 个答案: