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

基本布局：

<div id="box"> <ul id="ul"> <li><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>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}); } };

效果图：

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

【完美实现八种js焦点轮播图（上篇）】相关文章：

★ js控制div弹出层实现方法

★ JavaScript实现带标题的图片轮播特效

★ JQuery+CSS实现图片上放置按钮的方法

★ Mozilla中显示textarea中选择的文字

★ javascript用函数实现对象的方法

★ 原生js实现的贪吃蛇网页版游戏完整实例

★ Javascript实现图片轮播效果(二)图片序列节点的控制实现

★ JS与Java在网页设计中的区别

★ javascript+HTML5自定义元素播放焦点图动画

★ Jquery实现动态切换图片的方法