JS实现图片延时启动与定时闪动效果
作者:交互手记时间:2026-10-28 13:18:53浏览:97
本文介绍如何使用JavaScript和jQuery实现图片的延时启动与定时闪动效果。通过setTimeout控制初始延迟,利用setInterval实现持续的闪烁动画,并在指定时间后自动停止。代码示例展示了如何绑定点击事件、管理定时器ID以及控制图片显示与隐藏,适用于需要吸引注意力的广告位或提示场景。
图片延时闪动效果实现
当页面加载完成后,图片首先保持静止状态,经过5秒的延迟后开始执行闪动动画,随后在设定的时间点后停止闪烁。
var inter={};
var i=0;
$(document).ready(function(){
$("a").each(function(index,item){
$(this).bind().click(function(){
i=index;
if(inter!=null || inter.length>0){
window.clearInterval(inter);
}
window.setTimeout(function(){
inter=window.setInterval(function(){ $("img").eq(i).show().fadeOut(100).fadeIn(100);},500);
window.setTimeout(function(){
window.clearInterval(inter);
},5000);
},5000);
});
});
window.setTimeout(function(){
inter=window.setInterval(function(){ $("img").eq(i).show().fadeOut(100).fadeIn(100);},500);
window.setTimeout(function(){
window.clearInterval(inter);
},5000);
},5000);
});
作者最新文章
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载?前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系:Web前端三件套怎么协作
2026-11-04 15:41:40
