完美实现八种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之选择组件的深入解析
Jun 19 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
javascript对象的相关操作小结
May 16 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
javaScript中的空值和假值
Dec 18 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php上传文件常见问题总结
2015/02/03 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
出纳岗位职责
2013/11/09 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
食品安全标语
2014/06/07 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
感恩老师主题班会
2015/08/12 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python