20行JS代码实现图片切换效果-优快云博客

本文介绍了一种使用JavaScript实现的图片切换效果。通过设置不同的过渡效果，实现了图片间的平滑切换。该示例还包含了随机选择过渡效果的功能，并设置了定时器自动进行图片切换。

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

<!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=utf-8" />
<title>JS图片切换效果</title>
</head>
<style type="text/css">
	#oTransContainer{
		FILTER:progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16),
		BlendTrans(duration=2),
		RevealTrans(duration=2,transition=23),
		progid:DXImageTransform.Microsoft.Wipe(duration=3,gradientsize=0.25,motion=reverse),
		progid:DXImageTransform.Microsoft.RadialWipe(duration=2,wipeStyle=CLOCK),
		progid:DXImageTransform.Microsoft.Slide(duration=2,bands=1,slideStyle=SWAP),
		progid:DXImageTransform.Microsoft.Spiral(duration=2,gridSizeX=50,gridSizeY=50),
		progid:DXImageTransform.Microsoft.RandomDissolve(duration=2),
		progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16),
		progid:DXImageTransform.Microsoft.Stretch(duration=2,stretchStyle=PUSH),
		progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=0.25,motion=forward),
		progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0),
		progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=2,maxSquare=25),
		progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion='forward');
		WIDTH: 780px;
		HEIGHT: 533px;
	}
</style>
<body>

<div id="oTransContainer">
  <div><img src="images/1.jpg"><a href="#">陈家祠1</a></div>
  <div><img src="images/2.jpg"><a href="#">陈家祠2</a></div>
  <div><img src="images/3.jpg"><a href="#">陈家祠3</a></div>
  <div><img src="images/4.jpg"><a href="#">陈家祠4</a></div>
  <div><img src="images/5.jpg"><a href="#">陈家祠5</a></div>
  <div><img src="images/6.jpg"><a href="#">陈家祠6</a></div>
</div>
<script type="text/javascript">
var nowFrame = 0;
function fnToggle() {	
	var	imgs=oTransContainer.getElementsByTagName("div");
	var j=(Math.floor(Math.random()*oTransContainer.filters.length))
	var filter=oTransContainer.filters[j];
	var maxFrame=parseInt(imgs.length);
	
		nowFrame++;		
	if(nowFrame==maxFrame)nowFrame=0;
	
	filter.Apply();
	imgs[nowFrame].style.display = "block";
	filter.Play(duration = 2);
	
	for(var i=0;i<imgs.length;i++){
		if(i!=nowFrame)
		imgs[i].style.display = "none";			
	}	
	setTimeout("fnToggle()", 6000);
}
fnToggle();
</script>

</body>
</html>

JS图片切换效果超简单的实现;

附件中包含图片；