0

我这里有一个幻灯片：小提琴
代码：CSS：

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

#slideshow img {
    max-width:240px;
    max-height:240px;
}

ul {
    list-style:none;
    margin:0px;
    padding:0px;
}
ul li {
    float:left;
    border-radius:10px;
    width:10px;
    height:10px;
    border:1px solid white;
    background:grey;
}
ul li.active {
    background:black;
}

HTML：

<div id="slideshow">
    <div>
        <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" />
    </div>
    <div>
        <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg" />
    </div>
    <div>
        <img src="http://gillespaquette.ca/images/stack-icon.png" />
    </div>
</div>
<ul></ul>

查询：

$("#slideshow > div:gt(0)").hide();

var maxindex = $('#slideshow > div').length;

var index = 0
var interval = 3 * 1000; // 3 seconds
var timerJob = setInterval(traverseSlideShow, interval);

function traverseSlideShow() {
    console.log("current index: " + index);

    $('#slideshow > div')
        .stop()
        .fadeOut(1000);
    $('#slideshow > div').eq(index)
        .stop()
        .fadeIn(1000);

    $('ul li').removeClass('active');
    $('ul li:eq(' + index + ')').addClass('active');
    index = (index < maxindex - 1) ? index + 1 : 0;

}

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}

$(document).on('click', 'ul li', function () {
    index = $(this).index();
    traverseSlideShow();
    clearInterval(timerJob);
    timerJob = setInterval(traverseSlideShow, interval);
});

正如您在幻灯片中看到的那样，当您单击其中一个按钮 ( 在此处输入图像描述) 时，幻灯片会转到与您单击的按钮相关的照片。
我要做的非常简单，该功能最多每 1 秒接受 1 个请求，因此用户不能对按钮进行垃圾邮件点击，这意味着该功能应在每次点击时中断 1 秒并防止加载不同的图像在这 1 秒内使用不同的按钮（在这 1 秒内，幻灯片应加载请求的照片）。
我试图让我的问题更清楚，假设我们有三个按钮 1、2、3 单击按钮 1 该功能需要 1 秒来加载照片（如果单击按钮 2 或 3 则需要 1 秒功能不会加载 2 或 3) 的照片，依此类推。

4

2 回答 2

2

尝试一个简单的基于标志的解决方法，比如

var timerFlag = false; // a flag to keep track of the click state
$(document).on('click', 'ul li', function () {
    if(timerFlag){// if the click state is true within last 1 sec there was a click so don't do anything
        return
    }

    index = $(this).index();
    traverseSlideShow();
    clearInterval(timerJob);
    timerJob = setInterval(traverseSlideShow, interval);

    setTimeout(function(){ //after a second set the flag to false
        timerFlag = false;
    }, 1000);
    timerFlag = true;// set the click flag to true
});

演示：小提琴

于 2013-08-17T10:43:33.160 回答
0

您可以将该 jQuery 用作： $("#attrid").attr("disabled", true);
这会将该按钮的属性设置为禁用。然后你就可以使用这个 JavaScript 了！
setInterVal(function(), timeInSeconds);
您可以再次从中删除 disabled 属性！

于 2013-08-17T10:51:17.843 回答