1

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

http://jsfiddle.net/7ChVu/15/

唯一的问题是，如果您单击两次，您可能会弄乱 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>

4

2 回答 2

3

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

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

防止滑动过程中的点击有很多解决方案；一种是定义一个全局变量。

  var inprogress=false;

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

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

我希望你能明白并让你最终确定你的事件处理程序以满足你的需求

于 2013-02-08T12:56:53.483 回答
0

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

$("#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() }); 
    }
});

我必须检查包装器或按钮是否动画。如果两者都没有动画，那么我运行动画功能

在这里看到它：http: //jsfiddle.net/UqSFr/1/

于 2013-02-08T14:36:01.187 回答