纯JS焦点图特效实例(可一个页面多用)
实例如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JS网页特效-无特效图片焦点图特效（可一个页面多用）</title>
<styletype="text/css">
*{padding:0;margin:0;font-size:12px;}
ul,li{list-style:none;}
.indexFocus{border:1pxsolid#CCC;padding:2px;width:419px;height:185px;margin:0auto;}
.indexFocus.focusBox{width:419px;height:185px;position:relative;margin:0auto;position:relative}
.indexFocus.focusBox.bigPic{width:419px;height:185px;overflow:hidden;position:relative}
.indexFocus.focusBox.bigPicli{width:419px;height:185px}
.indexFocus.focusBox.bigPicimg{width:419px;height:185px}
.indexFocus.focusBox.btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus.focusBox.btnulli{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus.focusBox.btn.sel{width:15px;height:15px;background:#B90101;color:#fff}
.indexFocus.focusBox.picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50);/*IE*/-moz-opacity:0.5;/*MOZ,FF*/opacity:0.5;/*CSS3,FF1.5*/}
.indexFocus.focusBox.picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus.focusBox.picTexta{padding-left:10px;color:#fff;}
</style>
<styletype="text/css">
*{padding:0;margin:0;font-size:12px;}
ul,li{list-style:none;}
.indexFocus{border:1pxsolid#CCC;padding:2px;width:419px;height:185px;margin:0auto;}
.indexFocus.focusBox{width:419px;height:185px;position:relative;margin:0auto;position:relative}
.indexFocus.focusBox.bigPic{width:419px;height:185px;overflow:hidden;position:relative}
.indexFocus.focusBox.bigPicli{width:419px;height:185px}
.indexFocus.focusBox.bigPicimg{width:419px;height:185px}
.indexFocus.focusBox.btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus.focusBox.btnulli{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus.focusBox.btn.sel{width:15px;height:15px;background:#B90101;color:#fff}
.indexFocus.focusBox.picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50);/*IE*/-moz-opacity:0.5;/*MOZ,FF*/opacity:0.5;/*CSS3,FF1.5*/}
.indexFocus.focusBox.picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus.focusBox.picTexta{padding-left:10px;color:#fff;}
</style>
<scriptlanguage="javascript">
functionmainfun(mainObj,t){
functiongetID(id){returndocument.getElementById(id)}
functiongetTag(tag,obj){return(typeofobj=='object'?obj:getID(obj)).getElementsByTagName(tag);}
functionalph(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}}
varcut=0;
vartimer='';
varnum=getTag('li',getTag('div',getID(mainObj))[0]).length;
vargetpic=getTag('li',getTag('div',getID(mainObj))[0]);
vargetbtn=getTag('li',getTag('div',getID(mainObj))[1]);
vargettext=getTag('li',getTag('div',getID(mainObj))[2]);
for(i=0;i<num;i++){getpic[i].style.display="none";gettext[i].style.display="none";getbtn[i].onclick=(function(i){
returnfunction(){getbtn[i].className="sel";changePic(i);}})(i);}
getpic[cut].style.display="block";
getbtn[cut].className="sel";
gettext[cut].style.display="block";
getID(mainObj).onmouseover=function(){clearInterval(timer);}
getID(mainObj).onmouseout=function(){timer=setInterval(autoPlay,t);}
functionchangePic(ocut){
for(i=0;i<num;i++){cut=ocut;
getpic[i].style.display="none";
getbtn[i].className=""
gettext[i].style.display="none";
}
getpic[cut].style.display="block";
getbtn[cut].className="sel";
gettext[cut].style.display="block"
}
functionautoPlay(){
//alert(cut);
if(cut>=num-1){cut=0}else{cut++}
changePic(cut);
}
timer=setInterval(autoPlay,t);
}
functionchangeMenu(){
functiongetID(id){returndocument.getElementById(id)}
functiongetTag(tag,obj){return(typeofobj=='object'?obj:getID(obj)).getElementsByTagName(tag);}
varsel=0;varmenu=getID("menu");vargetBtn=getTag("h2",menu);vargetUl=getTag("ul",menu);varnum=getTag("h2",menu).length;for(i=0;i<num;i++){
getUl[i].style.display="none";
getBtn[i].onclick=(function(i){
returnfunction(){
clickMenu(i);
}
})(i);
}
getUl[sel].style.display="block";
functionclickMenu(sel){
for(i=0;i<num;i++){
getUl[i].style.display="none";
}
getUl[sel].style.display="block";
}
}
</script>
</head>
<bodystyle="background:url(images/bodyBg.jpg)repeat#333;">
<h1style="height:100px;line-height:100px;font-size:30px;font-family:'微软雅黑';color:#FFF;text-align:center;background:url(images/bodyBg3.jpg)repeat-xbottomleft;font-weight:normal">无特效图片焦点图特效（可一个页面多用）</h1>
<divstyle="background:#FFF;padding:50px;">
<!--效果开始-->
<divclass="indexFocus">
<divid="movePic1"class="focusBox">
<divclass="bigPic"id="oPic">
<ul>
<li><ahref="#"><imgsrc="images/ink_120615_10.jpg"alt="毛票票www.nhooo.com"/></a></li>
<li><ahref="#"><imgsrc="images/ink_120615_11.jpg"alt="毛票票www.nhooo.com"/></a></li>
<li><ahref="#"><imgsrc="images/ink_120615_12.jpg"alt="毛票票www.nhooo.com"/></a></li>
<li><ahref="#"><imgsrc="images/ink_120615_10.jpg"alt="毛票票www.nhooo.com"/></a></li>
<li><ahref="#"><imgsrc="images/ink_120615_11.jpg"alt="毛票票www.nhooo.com"/></a></li>
</ul>
</div>
<divclass="btn"id="oBtn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<divclass="picText"id="oText">
<li><ahref="https://www.nhooo.com"target="_blank">web应用</a></li>
<li><ahref="https://www.nhooo.com"target="_blank">IT云动态</a></li>
<li><ahref="https://www.nhooo.com"target="_blank">HTML学习</a></li>
<li><ahref="https://www.nhooo.com"target="_blank">图文特效集锦</a></li>
<li><ahref="https://www.nhooo.com"target="_blank">文章特效集锦</a></li>
</div>
<divclass="picText_bg"></div>
</div>
</div>
<scripttype="text/javascript">mainfun("movePic1",2000)</script>
<divstyle="height:30px;"></div>
<divclass="indexFocus">
<divid="movePic2"class="focusBox">
<divclass="bigPic"id="oPic">
<ul>
<li><ahref="#"><imgsrc="images/ink_120615_12.jpg"alt="毛票票www.nhooo.com"/></a></li>
<li><ahref="#"><imgsrc="images/ink_120615_10.jpg"alt="毛票票www.nhooo.com"/></a></li>
<li><ahref="#"><imgsrc="images/ink_120615_11.jpg"alt="毛票票www.nhooo.com"/></a></li>
</ul>
</div>
<divclass="btn"id="oBtn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<divclass="picText"id="oText">
<li><ahref=https://www.nhooo.com"target="_blank">HTML学习</a></li>
<li><ahref="https://www.nhooo.com"target="_blank">图文特效集锦</a></li>
<li><ahref="https://www.nhooo.com"target="_blank">文章特效集锦</a></li>
</div>
<divclass="picText_bg"></div>
</div>
</div>
<scripttype="text/javascript">mainfun("movePic2",3000)</script>
<!--End-->
</div>
<divstyle="height:200px;color:#FFF;padding-top:25px;line-height:28px;text-align:center;font-family:'微软雅黑';background:url(images/bodyBg2.jpg)repeat-xtopleft">
<pstyle="font-size:16px;">毛票票www.nhooo.com<astyle="color:#FFF"href="https://www.nhooo.com"target="_blank">www.nhooo.com</a></p>
</div>
</body>
</html>
以上这篇纯JS焦点图特效实例(可一个页面多用)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。