完美实现八种js焦点轮播图（上篇）

本文分为上下篇为大家分享了js焦点轮播图八种经典效果，供大家参考，具体内容如下
基本布局：

<div id="box"> <ul id="ul"><li style="display:block;"><img src="images/1.jpg" alt=""></li><li><img src="images/2.jpg" alt=""></li><li><img src="images/3.jpg" alt=""></li><li><img src="images/4.jpg" alt=""></li><li><img src="images/5.jpg" alt=""></li> </ul> <ol id="ol"><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li> </ol> </div>

--------------------------------------------------------------------------------
1.普通焦点图

window.onload=function（）{ var oUl=document.getElementById（"ul"）; var aLi_u=oUl.getElementsByTagName（"li"）; var oOl=document.getElementById（"ol"）; var aLi_o=oOl.getElementsByTagName（"li"）; for（var i=0;i<aLi_o.length;i++）{aLi_o[i].index=i;aLi_o[i].onmouseover=function（）{ for（var i=0;i<aLi_o.length;i++）{aLi_o[i].className="";aLi_u[i].style.display="none"; } this.className="active"; // console.log（aLi_o[this.index]）; aLi_u[this.index].style.display="block";} }}

效果图：图略
2.淡入淡出效果

var oUl=document.getElementById（"ul"）;var aLi_u=oUl.getElementsByTagName（"li"）;var oOl=document.getElementById（"ol"）;var aLi_o=oOl.getElementsByTagName（"li"）;for（var i=0;i<aLi_o.length;i++）{ aLi_o[i].index=i; aLi_o[i].onmouseover=function（）{ for（var i=0;i<aLi_o.length;i++）{aLi_o[i].className="";aLi_u[i].style.display="none";aLi_u[i].style.filter="alpha（opacity=0）";aLi_u[i].style.opacity=0; } this.className="active"; aLi_u[this.index].style.display="block"; startMove（aLi_u[this.index],{opacity:100}）; };}

效果图：

3.向上滚动效果：

var oUl=document.getElementById（"ul"）;var aLi_u=oUl.getElementsByTagName（"li"）;var oOl=document.getElementById（"ol"）;var aLi_o=oOl.getElementsByTagName（"li"）;var LiHeight=aLi_u[0].offsetHeight;for（var i=0;i<aLi_o.length;i++）{ aLi_o[i].index=i; aLi_o[i].onmouseover=function（）{for（var i=0;i<aLi_o.length;i++）{ aLi_o[i].className=""; this.className="active"; startMove（oUl,{top:-this.index*LiHeight}）;} };}

效果图：

4.定时上下滚动：

window.onload=function（）{ var oBox=document.getElementById（"box"）; var oUl=document.getElementById（"ul"）; var aLi_u=oUl.getElementsByTagName（"li"）; var oOl=document.getElementById（"ol"）; var aLi_o=oOl.getElementsByTagName（"li"）; var LiHeight=aLi_u[0].offsetHeight; var iNow=0;//当前索引 var timer=null;//定时器 for（var i=0;i<aLi_o.length;i++）{aLi_o[i].index=i;aLi_o[i].onmouseover=function（）{ for（var i=0;i<aLi_o.length;i++）{aLi_o[i].className="";this.className="active";//建立关系：很重要iNow=this.index;startMove（oUl,{top:-this.index*LiHeight}）; }}; //开定时器 timer=setInterval（toRun,2000）; oBox.onmouseover=function（）{clearInterval（timer）; }; oBox.onmouseout=function（）{timer=setInterval（toRun,2000）; }; //定时函数 function toRun（）{if（iNow==aLi_o.length-1）{ iNow=0;}else{ iNow++;}for（var i=0;i<aLi_o.length;i++）{ aLi_o[i].className="";}aLi_o[iNow].className="active";startMove（oUl,{top:-iNow*LiHeight}）; }};

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家，大家继续关注更多精彩焦点轮播图。