javascript图片变化的效果

最新推荐文章于 2021-10-08 16:25:12 发布

headwater

最新推荐文章于 2021-10-08 16:25:12 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java技术相关的文章文章标签： javascript transition filter border 文档存储

本文链接：https://blog.youkuaiyun.com/headwater/article/details/2294334

Java技术相关的文章专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片轮播效果，利用CSS滤镜实现图片过渡，并结合setTimeout函数控制图片切换时间。但存在点击链接切换图片时速度过快的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript图片变化的效果，也算是今天学到的一点小知识

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

var numAD=0;

　　var imgAD = new Array();//存储图片的src地址为数组。

　　imgAD[0] = "images/1.jpg";

　　imgAD[1] = "images/2.jpg";

　　imgAD[2] = "images/3.jpg";

　　imgAD[3] = "images/4.jpg";

imgAD[4] = "images/5.jpg";

var dotime=5000;

　　function setTransition(){

　　 if(document.all){

　　 u.filters.revealTrans.Transition=23;//Math.floor(Math.random()*23);

u.filters.revealTrans.Duration=4;

　　 u.filters.revealTrans.apply();

　　 }

　　function playTransition(){

　　 if(document.all){

　　 u.filters.revealTrans.play();

　　 }

　　function nextAD(){

　　 setTransition();

　　 document.u.src=imgAD[numAD];

　　 playTransition();

　　 if(numAD >= imgAD.length-1){

　　 numAD=0;

　　 }else{

　　 numAD++;

　　 }

　　 window.setTimeout("nextAD()",dotime);

　　}

function ad_clok(v)

{

this.numAD=v-1;

this.dotime=20000;

nextAD();

}

</script>

</div>

</body>

</html>

现在很多网站都有这种作为图片新闻展示的js效果了，不是什么新东西。这里面包含的主要两个东西就是：对css滤镜的使用和js的setTimeout()函数。不过呢后来发现一个问题，当通过下面的1，2，3，4连接来显示图片的时候图片变换非常快根本没达到设定的20秒，貌似window.setTimeout("nextAD()",dotime);里面的dotime失效了没气作用，困扰了我很久，希望达人恩解答哦，再见！