我这里有幻灯片:fiddle
代码: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>
Jquery的:
$("#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)的照片,依此类推。
答案 0 :(得分: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
});
演示:Fiddle
答案 1 :(得分:0)
您可以将该jQuery用作:
$("#attrid").attr("disabled", true);
这会将该按钮的属性设置为禁用。然后你可以使用这个JavaScript!
setInterVal(function(), timeInSeconds);
再次,您可以从中删除已禁用的属性!