JS实现八种焦点轮播图(上)
2016-01-03 19:41
651 查看
注:基于完美运动框架move2.js而完成的八种焦点录播图
基本布局:
1.普通焦点图
效果图:图略
2.淡入淡出效果
效果图:
![](http://img.blog.csdn.net/20160103172001212)
3.向上滚动效果:
效果图:
![](http://img.blog.csdn.net/20160103173229183)
4.定时上下滚动:
效果图:
![](http://img.blog.csdn.net/20160103193759460)
(未完待续…)
基本布局:
<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}); } };
效果图:
(未完待续…)
相关文章推荐
- 《高性能javascript》一书要点和延伸(下)
- jstorm安装配置
- JS将毫秒时间戳转换成合适的时间字符串
- JS实现-语句
- js中的匿名函数
- jsonkit mrc于arc混编
- ABP理论学习之Javascript API(理论完结篇)
- JS函数预解析
- js子窗口获取父窗口输入框值
- 瞠目结舌的JavaScript技巧
- js中没有函数重载,怎样实现函数重载的功能?
- JS中的phototype
- js如何获取到本周的第一天和最后一天,本月的第一天和最后一天以及本季度的第一天和最后一天
- (Frontend Newbie)JavaScript基础之函数
- 纯clipboard.js实现复制(IE兼容至IE7)
- arcgis-jsapi调用天地图在线服务范例
- <<编写可维护的javascript>> part1: 编程风格
- js javascript:void(0) 真正含义
- JSP三大指令 九大内置对象
- 从window.console&&console.log(123)浅谈JS的且运算逻辑(&&)