完美实现八种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 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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 strtok()函数的优点分析
2010/03/02 PHP
php生成QRcode实例
2014/09/22 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
JS验证字符串功能
2017/02/22 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
python类和继承用法实例
2015/07/07 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
出国留学自荐信
2013/10/25 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
初中美术教学反思
2014/01/29 职场文书
庆元旦活动总结
2014/07/09 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
超级礼物观后感
2015/06/15 职场文书
走进科学观后感
2015/06/18 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js