好资源导航 » 文章资讯 » JS实现可切换图片的幻灯切换效果示例

JS实现可切换图片的幻灯切换效果示例

2023-08-23 02:59:04 77

本文实例讲述了JS实现可切换图片的幻灯切换效果。分享给大家供大家参考，具体如下：





JS切换图片幻灯切换效果


window.onload=function(){
varoBox=document.getElementById("box");
varaUl=document.getElementsByTagName("ul");
varaImg=aUl[0].getElementsByTagName("li");
varaNum=aUl[1].getElementsByTagName("li");
vartimer=play=null;
vari=index=0;
varbOrder=true;
//切换按钮
for(i=0;i=aImg.length&&(index=aImg.length-2,bOrder=false);
//倒序
index<=0&&(index=0,bOrder=true);
//调用函数
show(index)
},2000);
}
autoPlay();//应用
functionshow(a){
index=a;
varalpha=0;
for(i=0;i100&&(alpha=100);
aImg[index].style.opacity=alpha/100;
aImg[index].style.filter="alpha(opacity="+alpha+")";
alpha==100&&clearInterval(timer)
},20);
}
};












1
2
3
4
5

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

JS实现可切换图片的幻灯切换效果示例

热门推荐

随机推荐