在单击时暂停并播放 JavaScript 滑块事件
pause and play javascript slider event onclick
我正在完成对我的网站的编码并向登录页面添加图像滑块。我对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();
});
相关文章:
- 如何将javascript事件从web浏览器wpf控件发送到wpf的c#代码
- 在同一个javascript事件处理程序中调用不同的函数
- Javascript事件;在新选项卡中打开”;
- 存在每个时间元素的javascript事件
- Javascript事件.锚的目标问题
- 带有参数的Javascript事件处理程序
- 如何从另一个处理程序内部取消JavaScript事件处理程序函数的执行
- firefox中的Javascript事件范围问题
- Firefox中的JavaScript事件参数
- 在动态加载的PHP表单上放置JavaScript事件
- 如何在Javascript事件上从JSNI设置GWTClass字段
- Javascript事件发射器一次处理多个事件
- 在下拉式javascript事件监听器中选择时触发事件
- 在javascript中导入xlsx文件时,如何手动强制javascript事件
- 显示触发的JavaScript事件
- 正在取消IE11中的JavaScript事件
- 页面卸载期间的JavaScript事件循环
- 存在其他参数时访问Javascript事件
- 阻止Javascript事件影响子元素
- 如何在事件处理程序中获取 javascript 事件对象