JS实现模拟FLASH幻灯片图片切换网页特效，当用户的鼠标经过图片编号时切换大图显示，可自定义图片属性。
<!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" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js实现鼠标经过图片编号自动切换显示效果_武鸣人</title>
<style type ="text/css">
/* <![CDATA[ */
ul,li{
padding:0;
margin:0;
list-style:none;
}
#www_wuming_ren{
width:346px;
height:186px;
border:1px solid #EEE;
position:relative;
}
#www_wuming_ren img{
/*初始不要显示*/
display:none;
/*用边框来实现空位，因为margin和paading有时会引起些麻烦*/
border:3px solid #FFF;
}
#www_wuming_ren ul{
position:absolute;
right:7px;
bottom:9px;
font:9px tahoma;
}
#www_wuming_ren ul li{
display:block;
float:left;
width:12px;
height:12px;
line-height:12px;
margin-right:3px;
border:1px solid #999;
background:#F0F0F0;
text-align:center;
cursor:pointer;
}
#www_wuming_ren ul li.hover{
border-color:red;
background:#FFE1E1;
color:red;
}
/* ]]> */
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<script type="text/javascript">
function www_wuming_renCtrl(o){
this.obj=document.getElementById(o);
//这个私有方法虽然写了，但暂时没用到
function addListener(ele,eventName,functionBody){
if (ele.attachEvent){
ele.attachEvent("on"+eventName, functionBody);
}else if (ele.addEventListener){
ele.addEventListener("on"+eventName,functionBody, false);
}else{
return false;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
}
//初始化
this.init=function(){
var objImg=this.obj.getElementsByTagName("img");
var tagLength=objImg.length;
if (tagLength>0){
var oUl=document.createElement("ul");
oUl.setAttribute("id",o+"numTag");
for (var i=0;i<tagLength;i++){
var oLi=oUl.appendChild(document.createElement("li"));
if (i==0){
oLi.setAttribute("class","hover"); //初始化时把第一个设置为高亮
oLi.setAttribute("className","hover");
}
//设置标签的数字
oLi.appendChild(document.createTextNode((i+1)));
}
this.obj.appendChild(oUl);
objImg[0].style.display="block";
//设置标签事件
var oTag=this.obj.getElementsByTagName("li");
for (var i=0;i<oTag.length;i++){
oTag[i].onmouseover=function(){
for (j=0;j<oTag.length;j++){
oTag[j].className="";
objImg[j].style.display="none";
}
this.className="hover";
objImg[this.innerHTML-1].style.display="block";
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
};
//自动滚动的方法还没写
this.imgRoll=function(){};
//生成对象时自动加载init()方法以初始化对象
this.init();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<div id="www_wuming_ren">
<img src="/img/20240516_www_wuming_ren_1.jpg" />
<img src="/img/20240516_www_wuming_ren_2.jpg" />
<img src="/img/20240516_www_wuming_ren_3.jpg" />
<img src="/img/20240516_www_wuming_ren_4.jpg" />
</div>
<script type="text/javascript">
//生成一个对象
new www_wuming_renCtrl("www_wuming_ren");
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处