脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js焦点轮播图

完美实现八种js焦点轮播图（上篇）

 更新时间：2016年07月18日 14:40:50   作者：macanfa  
这篇文章主要介绍了完美实现八种js焦点轮播图的具体资料，基于完美运动框架move2.js而完成的八种焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图：

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图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

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

您可能感兴趣的文章:

相关文章

  • javascript 支持链式调用的异步调用框架Async.Operation

    javascript 支持链式调用的异步调用框架Async.Operation

    javascript 支持链式调用的异步调用框架Async.Operation
    2009-08-08
  • JS实现数组的增删改查操作示例

    JS实现数组的增删改查操作示例

    这篇文章主要介绍了JS实现数组的增删改查操作,结合实例形式分析了javascript针对数组的追加、获取、删除、添加、修改等常见操作技巧与相关注意事项,需要的朋友可以参考下
    2018-08-08
  • JS实现图片预加载之无序预加载功能代码

    JS实现图片预加载之无序预加载功能代码

    这篇文章主要介绍了JS实现图片预加载之无序预加载功能代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-05-05
  • 小程序自定义弹框的方法

    小程序自定义弹框的方法

    这篇文章主要为大家详细介绍了小程序自定义弹框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • js+canvas实现画板功能

    js+canvas实现画板功能

    这篇文章主要为大家详细介绍了js+canvas实现画板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js实现简单拼图游戏

    js实现简单拼图游戏

    这篇文章主要为大家详细介绍了js实现简单拼图游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js 得到文件后缀(通过正则实现)

    js 得到文件后缀(通过正则实现)

    使用js获取文件的后缀，有个不错的正则，大家可以借用下，具体如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • Cropper.js进阶之裁剪后保存至服务器实现详解

    Cropper.js进阶之裁剪后保存至服务器实现详解

    这篇文章主要为大家介绍了Cropper.js进阶之裁剪后保存至服务器实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • 两种js监听滚轮事件的实现方法

    两种js监听滚轮事件的实现方法

    下面小编就为大家带来一篇两种js监听滚轮事件的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js仿微博动态栏功能

    js仿微博动态栏功能

    本文主要介绍了js仿微博动态栏功能的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02

最新评论