图片轮播

最新推荐文章于 2025-05-22 13:28:11 发布

weixin_33881140

最新推荐文章于 2025-05-22 13:28:11 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sq45711478/p/5900463.html

本文介绍了一种使用HTML和JavaScript实现的轮播图自动切换效果。通过设置定时器每隔一段时间自动切换到下一张图片，并在图片切换时进行淡入淡出的效果。此方法适用于网页设计中需要展示多张图片轮播的应用场景。

</style>

</head>
<body>

</body>
<script type="text/javascript">

window.setInterval("Huan()",2000);

//找到图片的最大索引
var n = document.getElementsByTagName("img").length-1;
//存当前图片的索引
var d =0;

//换图
function Huan()
{
//找到所有图片
var attr = document.getElementsByTagName("img");

//当前索引加1
d++;

//判断索引是否超出范围
if(d>n)
{
d = 0;
}

//换图
//让所有隐藏
for(var i=0;i<=n;i++)
{
attr[i].style.display = "none";
}

//让该索引的显示
attr[d].style.display = "block";
}