完美实现八种js焦点轮播图(上篇)


Posted in Javascript onJuly 18, 2016

本文分为上下篇为大家分享了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});
 };
}

效果图:

完美实现八种js焦点轮播图(上篇)

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});
 }
 };
}

效果图:

完美实现八种js焦点轮播图(上篇)

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焦点轮播图(上篇)

更多关于轮播图效果的专题,请点击下方链接查看学习

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

Javascript 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 #Javascript
JS HTML5拖拽上传图片预览
Jul 18 #Javascript
jQuery 操作input中radio的技巧
Jul 18 #Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 #Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 #Javascript
浅析JavaScript中的array数组类型系统
Jul 18 #Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 #Javascript
You might like
php curl的深入解析
2013/06/02 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
joomla数据库操作示例代码
2016/01/06 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
详解Python循环作用域与闭包
2019/03/21 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
html5的localstorage详解
2017/05/09 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
大课间体育活动方案
2014/03/12 职场文书
出国留学担保书
2014/05/20 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
假期安全教育广播稿
2014/10/04 职场文书
致运动员的广播稿
2015/08/19 职场文书
护士心得体会范文
2016/01/25 职场文书