Question

我正在尝试为自己的投资组合构建一个全宽度图像轮播/图库。我的第一个想法是将整个图像块gallery_wrapper向左或向右移动，带有正面或负面margin-left （或者您认为这是一个坏主意吗？） 。对于两个方向，都有一个按钮控件执行jQuery函数但是如果我非常快地触发按钮，那么当前一个函数没有完成时会再次执行该函数，这会导致错误的计算。所以我想我可以设置一个变量，我称之为slide_executed。在正常状态下，该值将为true，但在触发该函数时，该值将设置为false。使用简单的if语句，我可以检查slide_executed是否为真，然后才触发下一张幻灯片。

嗯，问题是：它不起作用。如果我单击以快速按下按钮，幻灯片仍将被偏移。我该怎么办？

...

所以这是我的HTML （我看到的很多画廊都是用无序列表构建的。这实际上是比使用嵌套div更好的方式吗？）：

 <div id="gallery_wrapper">
 <div class="image" class="first active">
      <div class="image_content">
           <img src="http://placekitten.com/g/1000/1000" alt="Slideshow Image 2" width="100%" style="background-color: green;" />
      </div>
 </div>
 <div class="image">
      <div class="image_content" style="background-color: gray;">
           <img src="http://placekitten.com/g/1200/1000" alt="Slideshow Image 2" width="100%" />
      </div>
 </div>
 <div class="image">
      <div class="image_content">
           <img src="http://placekitten.com/g/1000/900" alt="Slideshow Image 3" width="100%" style="background-color: blue;" />
      </div>
 </div>
 <div class="image last">
      <div class="image_content">
           <img src="http://placekitten.com/g/1000/1100" alt="Slideshow Image 4" width="100%" />
      </div>
 </div>
 </div>
 <div class="overlay">
      <button class="left">Left</button>
      <button class="right">Right</button>
 </div>

这就是CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#gallery_wrapper {
    margin: 0;
    padding: 0;
    width: 400%; /* 100 x Anzahl der Slides */
    height: 100%;
    overflow: scroll;
    direction: rtl;
    vertical-align: middle;
}

.image {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 25%; /* 100 : Anzahl der Slides */
    float: left;
}

.image_content {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.image img {
    margin: 0;
    padding: 0;
    height: 100%;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.overlay {
    bottom: 0px;
    position: fixed;
    background-color: green;
    font-size: 20;
    height: 50px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.overlay button {
    background-color: yellow;
    height: 50px;
    text-align: center;
    vertical-align: middle;
}

是的，这个是我的jQuery解决方案：

$(document).ready(function () {

var slide_width = +$('.image_content').outerWidth();
var slide_executed = true;

var slide_right = function () {
    slide_executed = false;
    console.log(slide_executed);
    var left_indent = parseInt($('#gallery_wrapper').css('margin-left')) - slide_width;
    $('#gallery_wrapper').animate({
        'margin-left': left_indent
    }, {
        queue: false,
        duration: 500
    });
    slide_executed = true;
    console.log(slide_executed);
};

var slide_left = function () {
    slide_executed = false;
    console.log(slide_executed);
    var right_indent = parseInt($('#gallery_wrapper').css('margin-left')) + slide_width;
    $('#gallery_wrapper').animate({
        'margin-left': right_indent
    }, {
        queue: false,
        duration: 500
    });
    slide_executed = true;
    console.log(slide_executed);
};

$('.left').click(function () {
    if (slide_executed == true) {
        slide_left();
    };
});

$('.right').click(function () {
    if (slide_executed == true) {
        slide_right();
    };
});

});

这是整个事情的Fiddle ......

Answer 1

这应禁用控件。

$('.left').click(function () {
    if (!$('#gallery_wrapper').is(':animated')) {
        slide_left();
    };
});

$('.right').click(function () {
    if (!$('#gallery_wrapper').is(':animated')) {
        slide_right();
    };
});

$().animation是非阻止功能，因此即使动画未完成，slide_executed也会设置为true

如何在上一次执行完成时启动jQuery函数？

1 个答案: