javascript实现图片轮换效果

最新推荐文章于 2022-03-22 20:11:58 发布

hhrxp373317

最新推荐文章于 2022-03-22 20:11:58 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 图片广告轮换

本文链接：https://blog.csdn.net/hhrxp/article/details/11712705

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片轮换广告</title>
<style type="text/css">

</style>
<script type="text/javascript">
   var NowFrame = 1; //设置显示的第一个图片
   var MaxFrame = 4; //设置显示图片的个数
function show(){

   for(var i=1;i<=MaxFrame;i++){
       if(NowFrame==i)
       document.getElementById("adv"+NowFrame).style.display='block'; //当前显示图片
       else
       document.getElementById("adv"+i).style.display='none';
   }
   if(NowFrame == MaxFrame){ //判断当前图片是否是最后一个，如果是则从第一个重新轮回显示
       NowFrame = 1;
   }else{
       NowFrame++;//设置下一个显示的图片
   }
}
setInterval('show()', 1000); //设置定时器，显示下一个图片
</script>

</head>
<body οnlοad="show()">
<img id="adv1" style="display: none;" src="images/1.jpg">
<img id="adv2" style="display: block;" src="images/2.jpg">
<img id="adv3" style="display: none;" src="images/3.jpg">
<img id="adv4" style="display: none;" src="images/4.jpg">
</body>
</html>

hhrxp373317

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript实现图片轮换效果

图片轮换广告img {position:absolute;width:350px;height:263px;z-index:2;left:100px;top: 13px;}--> var NowFrame = 1; //设置显示的第一个图片 var MaxFrame = 4; //设置显示图片的个数function sho
复制链接

扫一扫

专栏目录