1

jQuery に基づく div スライダーがあります。魅力的に機能します。

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

唯一の問題は、2 回クリックすると 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

最初に、HTML ではなく JavaScript でイベントをバインドする必要があります。

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

スライド中のクリックを防ぐには、多くの解決策があります。1 つは、グローバル変数を定義することです。

  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");

アイデアが得られて、ニーズに合わせてイベント ハンドラーを完成させてくれることを願っています

于 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 に答える