欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Javascript特效学习之选项卡卡定时自动切换代码教程

程序员文章站 2023-10-29 15:11:28
javascript特效之选项卡卡定时自动切换 我们经常看到一些广告是tab页形式的,而且会自动切换,今天我们来看看是怎么实现的。 效果图: 每过一秒会自动切换一个tab页。 实现思路:写一个定时...

javascript特效之选项卡卡定时自动切换

我们经常看到一些广告是tab页形式的,而且会自动切换,今天我们来看看是怎么实现的。

效果图:

Javascript特效学习之选项卡卡定时自动切换代码教程

每过一秒会自动切换一个tab页。

实现思路:写一个定时器每一秒执行一次,并判断当前tab页的下标来显示对应的tab页。对其他tab则设置display:none。

js代码:

function sh(){
	s=(s>=5)?1:s+1
	for (var i=1;i<=5;i++){
		document.getelementbyid("yp_card"+i).style.display = "none";
	}
	document.getelementbyid("yp_card"+s).style.display = "block"
	timer=settimeout("sh()",t)
}
sh()