我有一個基於jQuery的div滑塊 它像一個魅力。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">« Previous</a>
</td>
<td align="right"><a href="javascript:void(0)" onclick="NextSlide()" id="NextButton">Next »</a>
</td>
</tr>
</tbody>
您的jsfiddle不爲我工作嗎?... – luiges90 2013-02-08 12:37:14
不知道爲什麼 - 我的最後的編輯並沒有保存:HTTP:/ /jsfiddle.net/7ChVu/15/ – 2013-02-08 12:53:21
是否有可能您正在尋找[stop()](http://api.jquery.com/stop/)函數?它不會禁用您的鏈接,但它可以清除動畫隊列,以防用戶想要更快翻閱。 – thordarson 2013-02-08 12:54:21