我正在完成对我的网站的编码并向登录页面添加图像滑块。我对javascript很陌生,所以我复制并粘贴了一个图像滑块演示,并根据我的需要对其进行了一些调整。我有 4 张图像,每隔一段时间就会淡入下一个图像。我现在想做的是拥有它,以便当您单击任何图像时,自动播放幻灯片将暂停,然后您可以单击以恢复。我整天都在浏览论坛和教程,但我太迷茫了。任何帮助将不胜感激。谢谢。
.HTML
<ul id="slider">
<li><img src="images/img1.png"/></li>
<li><img src="images/img2.png"/></li>
<li><img src="images/img3.png"/></li>
<li><img src="images/img4.png"/></li>
</ul>
JavaScript
<script>
$(function () {
var change_img_time = 5000;
var transition_speed = 100;
var simple_slideshow = $("#slider"),
listItems = simple_slideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function () {
listItems.eq(i).fadeOut(transition_speed, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
});
};
listItems.not(':first').hide();
setInterval(changeList, change_img_time);
});
</script>
尝试
$(function () {
var change_img_time = 5000;
var transition_speed = 100;
var simple_slideshow = $("#slider"),
listItems = simple_slideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function () {
listItems.eq(i).fadeOut(transition_speed, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
});
};
listItems.not(':first').hide();
var timer = setInterval(changeList, change_img_time);
listItems.click(function () {
if (timer) {
clearTimeout(timer);
timer = undefined;
} else {
timer = setInterval(changeList, change_img_time);
}
})
});
演示:小提琴
我尝试使用 jquery 在以下 URL 为您创建一个示例演示。
http://jsfiddle.net/codebombs/ukNmT/
请检查并根据您的需要进行修改。
//To store timeout id
var timeoutId;
var slideImage = function( step ) {
if ( step == undefined ) step = 1;
//Clear timeout if any
clearTimeout ( timeoutId );
//Get current image's index
var indx = $('.item:visible').index('.item');
//If step == 0, we don't need to do any fadein our fadeout
if ( step != 0 ) {
//Fadeout this item
$('.item:visible').fadeOut();
}
//Increment for next item
indx = indx + step ;
//Check bounds for next item
if ( indx >= $('.item').length ) {
indx = 0;
} else if ( indx < 0 ) {
indx = $('.item').length - 1;
}
//If step == 0, we don't need to do any fadein our fadeout
if ( step != 0 ) {
//Fadein next item
$('.item:eq(' + indx + ')').fadeIn();
}
//Set Itmeout
timeoutId = setTimeout ( slideImage, 5000 );
};
//Start sliding
slideImage(0);
//When clicked on prev
$('#prev').click(function() {
//slideImage with step = -1
slideImage ( -1 );
});
//When clicked on next
$('#next').click(function() {
//slideImage with step = 1
slideImage ( 1 );
});
//When clicked on Pause
$('#pause').click(function() {
//Clear timeout
clearTimeout ( timeoutId );
//Hide Pause and show Play
$(this).hide();
$('#play').show();
});
//When clicked on Play
$('#play').click(function() {
//Start slide image
slideImage(0);
//Hide Play and show Pause
$(this).hide();
$('#pause').show();
});