图片轮换（图片展示）源码--总结篇

本文链接：https://blog.csdn.net/hymcn/article/details/5562227

本文总结了如何使用JavaScript创建图片轮换效果，包括基本的图片展示、过渡动画和定时切换等功能，适用于网页菜单或其他需要动态展示图片的场景。

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

图片轮换效果一：

源码：

1、scroll.js

}else{
			var img = new Image();
			img.border = "0";
			img.src = fImgs[imageIndex].img;
			img.width = "320";
			img.height = "240";
			var a = document.createElement("a");
			a.href = fImgs[imageIndex].href;
			a.target = "_blank";
			a.id = imgId;
			a.appendChild(img);
			flash_img_div.appendChild(a);
		}
	}
	flash_img_div.filters && flash_img_div.filters[0].Play();
	var flash_show_ctl_msg = document.getElementById("flash_show_ctl_msg");
	flash_show_ctl_msg.filters && flash_show_ctl_msg.filters[0].Apply();
	flash_title.href = fImgs[imageIndex].href;
	flash_title.innerHTML = fImgs[imageIndex].title;
	flash_show_ctl_msg.filters && flash_show_ctl_msg.filters[0].Play();
	showImageIndex = imageIndex;
	return true;
}
function imagePlay()
{
	if(imageTimer) return;
	if(showImageIndex>=fImgs.length-1){
		showImageIndex = -1;
	}
	showImage(showImageIndex+1);
	imageTimer = setInterval(function(){
					var stat = showImage(showImageIndex+1);
					if(!stat){
						stop();
					}	
				},7000);
}
function stop(){
	clearInterval(imageTimer);
	imageTimer = null;
}
function showNextImage(){
	showImage(showImageIndex+1);
}
function showPrevImage(){
	showImage(showImageIndex-1);
}

2、css.css

BODY {FONT-SIZE: 8pt;  MARGIN: 0px; COLOR: #cb6080; BACKGROUND-REPEAT: repeat-x; FONT-FAMILY: Tahoma, "新宋体", "宋体"; BACKGROUND-COLOR: #fff;}

.li_dot {FONT-SIZE: 12px; COLOR: #ed1264; FONT-FAMILY: Webdings}

#flash_show_out {MARGIN-TOP: 5px; FLOAT: left; WIDTH: 322px;}
#flash_show {BORDER-TOP-WIDTH: 4px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 4px; BORDER-BOTTOM-WIDTH: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 240px; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 4px}
#flash_img {BORDER-RIGHT: #f27e96 1px solid; BORDER-TOP: #f27e96 1px solid; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); OVERFLOW: hidden; BORDER-LEFT: #f27e96 1px solid; WIDTH: 320px; BORDER-BOTTOM: #f27e96 1px solid; HEIGHT: 100%}
#flash_btn {LEFT: 1px; POSITION: absolute; TOP: 165px}
#flash_btn DIV {MARGIN: 5px}
#flash_show_ctl {PADDING-RIGHT: 0px; MARGIN-TOP: 2px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; COLOR: #434343; PADDING-TOP: 3px; HEIGHT: 16px}
#flash_show_ctl A {COLOR: #434343}
#flash_show_ctl_msg {FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); FLOAT: left; OVERFLOW: hidden; WIDTH: 289px}
#flash_show_ctl_tuber {Z-INDEX: 100; LEFT: 305px; POSITION: relative; TOP: -17px}
#flash_show_ctl_arrow {MARGIN-RIGHT: 5px}

3.index.html

<div id=flash_show_ctl>
      <div id=flash_show_ctl_msg><span class=li_dot>4</span><a id=flash_title 
href="#"></a> </div>
      <div style="PADDING-TOP: 2px" mce_style="PADDING-TOP: 2px"><a id=img_prev_btn 
onClick="showPrevImage();return false;" href="#" mce_href="#" 
target=_self><img height=12 alt=上一页 
src="images/flash_back.gif" width=11 border=0></a> <a 
id=img_next_btn onClick=" showNextImage();return false;" 
href="#" target=_self><img height=12 alt=下一页 
src="images/flash_next.gif" width=11 border=0></a> </div>
</div>
<mce:script language=javascript type=text/javascript></mce:script>

</div>
</body>
</html>

很普通的那种，纯js作品，唯一不足是数据和图片的控制需在JS中进行，不太喜欢···