Question

我有一个基于jQuery的div滑块它就像一个魅力。

唯一的问题是，如果你点击两次，你可能会搞乱div的位置，你可能会得到一个空白区域，前一个按钮仍处于活动状态。

如何在幻灯片放弃/淡化时禁用点击，直到div到位？

- 见下面的代码：

<style>
a, a:link, a:visited, a:hover, a:active {
color: #666;
text-decoration:none; }

a:hover {
font-weight:bold; }

a:visited {
color: #999; }

#h_container {
width: 200px;
overflow: hidden; }

#h_wrapper {
width: 600px; }

.h_slide {
width: 200px;
height: 200px;
overflow: hidden;
float: left; }
</style>

<script>
var SlideWidth = 200;
var SlideSpeed = 500;

$(document).ready(function() {
    // set the prev and next buttons display
    SetNavigationDisplay();
});

function CurrentMargin() {
    // get current margin of slider
    var currentMargin = $("#h_wrapper").css("margin-left");

    // first page load, margin will be auto, we need to change this to 0
    if (currentMargin == "auto") {
        currentMargin = 0;
    }

    // return the current margin to the function as an integer
    return parseInt(currentMargin);
}

function SetNavigationDisplay() {
    // get current margin
    var currentMargin = CurrentMargin();

    // if current margin is at 0, then we are at the beginning, hide previous
    if (currentMargin == 0) {
        $("#PreviousButton").fadeOut();
    } else {
        $("#PreviousButton").fadeIn();
    }

    // get wrapper width
    var wrapperWidth = $("#h_wrapper").width();

    // turn current margin into postive number and calculate if we are at last slide, if so, hide next button
    if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
        $("#NextButton").fadeOut();
    } else {
        $("#NextButton").fadeIn();
    }
}

function NextSlide() {
    // get the current margin and subtract the slide width
    var newMargin = CurrentMargin() - SlideWidth;

    // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
    $("#h_wrapper").animate({
        marginLeft: newMargin
    }, SlideSpeed, function() {
        SetNavigationDisplay()
    });
}

function PreviousSlide() {
    // get the current margin and subtract the slide width
    var newMargin = CurrentMargin() + SlideWidth;

    // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
    $("#h_wrapper").animate({
        marginLeft: newMargin
    }, SlideSpeed, function() {
        SetNavigationDisplay()
    });
}
</script>

<!--- DISPLAY CONTAINER --->
<div id="h_container">
    <!-- OUTTER WRAPPER -->
    <div id="h_wrapper">
        <!-- SLIDE 1 -->
        <div id="slide1" class="h_slide">
            <p>Part 1</p>
        </div>
        <!-- SLIDE 2 -->
        <div id="slide2" class="h_slide">
           <p>Part 2</p>
    </div>
    <!-- SLIDE 3 -->
    <div id="slide3" class="h_slide">
        <p>Part 3</p>
    </div>
</div>

<!--- NAVIGATION BUTTONS -->
<table style="width:200px; padding: 0 10px 0 10px;">
<tbody>
    <tr>
        <td align="left"><a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton"
            style="display:none">&laquo; Previous</a>

        </td>
        <td align="right"><a href="javascript:void(0)" onclick="NextSlide()" id="NextButton">Next &raquo;</a>

        </td>
    </tr>
</tbody>

Answer 1

首先你需要在javascript而不是html中绑定你的事件。

  var $body=$(document.body);
  $body.on({click: function() {}},"#NextButton");

在滑动期间防止点击有很多解决方案; 一个是定义一个全局变量。

  var inprogress=false;

在单击事件时，检查该变量是否为true / false 如果为false，则将其设置为true并执行您的动画，然后在动画回调中将其设置为false。

   $body.on({
      click: function() {
       if (!inprogress) {
          inprogress=true;
          $("#h_wrapper").animate({
                marginLeft: newMargin
             }, SlideSpeed, function() {
                   SetNavigationDisplay();
                   inprogress=false;
            });
          }
        }
       },"#NextButton");

我希望你能得到这个想法＆amp;让您最终确定您的事件处理程序以满足您的需求

Answer 2

我最终得到了这个解决方案：

$("#NextButton").on("click", function() { 
if ( $("#h_wrapper").is(':not(:animated)') && $("#NextButton").is(':not(:animated)') ) {
    var newMargin = CurrentMargin() - SlideWidth;
    $("#h_wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() }); 
    }
});

我必须检查包装器或按钮是否已设置动画。如果两者都没有动画，那么我运行animate函数

请在此处查看：http://jsfiddle.net/UqSFr/1/

jQuery div滑块在滑动时阻止单击

2 个答案: