完美实现八种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循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
详解Python if-elif-else知识点
2018/06/11 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
购房协议书
2014/04/11 职场文书
安全演讲稿开场白
2014/08/25 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS