首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现轮播图的两种方式(构造函数、面向对象)

Posted in Javascript onSeptember 30, 2017

本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下

1、构造函数

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type='text/css'>
   *{ margin:0; padding:0;}
   
   #wrap{
    width:500px;
    height:360px;
    margin:100px auto;
    position:relative;
   }

   #pic{
    width:500px;
    height:360px;
    position:relative;
   }

   #pic img{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
   }

   #tab{
    width:105px;
    height:10px;
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-50px;
   }

   #tab ul li{
    width:10px;
    height:10px;
    margin:0 5px;
    background:#bbb;
    border-radius:100%;
    cursor:pointer;
    list-style:none;
    float:left;
   }
   #tab ul li.on{ background:#f60;}

   #btn div{
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    margin-top:-20px;
    color:#fff;
    background:#999;
    background:rgba(0,0,0,.5);
    font-size:20px;
    font-weight:bold;
    font-family:'Microsoft yahei';
    line-height:40px;
    text-align:center;
    cursor:pointer;
   }
   #btn div#left{ left:0;}
   #btn div#right{ right:0;}

  </style>
 </head>
 <body>
  <div id="wrap">
   <div id="pic">
    <img src="img/1.jpg" alt="" />
    <img src="img/2.jpg" alt="" />
    <img src="img/3.jpg" alt="" />
    <img src="img/4.jpg" alt="" />
   </div>
   <div id="tab">
    <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div id="btn">
    <div id='left'><</div>
    <div id='right'>></div>
   </div>
  </div>
  <script>
   var oWrap=document.getElementById('wrap')
   var picImg=document.getElementById('pic').getElementsByTagName('img');
   var tabLi=document.getElementById('tab').getElementsByTagName('li');
   var btnDiv=document.getElementById('btn').getElementsByTagName('div');
   var index=0;
   var timer=null;//设置一个timer变量,让他的值为空
   //初始化
   picImg[0].style.display='block';
   tabLi[0].className='on';
   
   for(var i=0;i<tabLi.length;i++){

    tabLi[i].index=i; 
    tabLi[i].onclick=function(){
     
     //不然要for循环清空
  /*   for(var i=0;i<tabLi.length;i++){
      picImg[i].style.display='none'; 
      tabLi[i].className='';
     }*/
     picImg[index].style.display='none'; //每个li都有index自定义属性
     tabLi[index].className='';
     index=this.index;
     picImg[index].style.display='block';
     tabLi[index].className='on';
     
    }    
   };
   for(var i=0;i<btnDiv.length;i++){

    btnDiv[i].index=i;
    btnDiv[i].onselectstart=function(){ //禁止选择
     return false;
    }
    btnDiv[i].onclick=function(){
     
     picImg[index].style.display='none'; //每个li都有index自定义属性
     tabLi[index].className='';
     //index=this.index;
     if(this.index){
      index++; //进来就加1，index就相当1%4 2%4 3%4 4%4
      //if(index>tabLi.length){index=0}
      //index=index%arrUrl.length; 自己取模自己等于0 alert(3%3) == 0 
      index%=tabLi.length;//相当于当大于tabLi.length就等于0
     }else{
      index--;
      if(index<0)index=tabLi.length-1;     
     }  
     picImg[index].style.display='block';
     tabLi[index].className='on';
     
    }    
   };
   auto();
   oWrap.onmouseover=function(){
    clearInterval(timer)
   }
   oWrap.onmouseleave=function(){
    auto();
   }
   function auto(){
    timer=setInterval(function(){ //一般都是向左轮播,index++
      picImg[index].style.display='none';
      tabLi[index].className='';
      index++;
      index%=tabLi.length;
      picImg[index].style.display='block';
      tabLi[index].className='on';
    },2000)
   };
  </script>
 </body>
</html>

2、面向对象

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type='text/css'>
   *{ margin:0; padding:0;}
   
   #wrap{
    width:500px;
    height:360px;
    margin:100px auto;
    position:relative;
   }

   #pic{
    width:500px;
    height:360px;
    position:relative;
   }

   #pic img{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
   }

   #tab{
    width:105px;
    height:10px;
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-50px;
   }

   #tab ul li{
    width:10px;
    height:10px;
    margin:0 5px;
    background:#bbb;
    border-radius:100%;
    cursor:pointer;
    list-style:none;
    float:left;
   }
   #tab ul li.on{ background:#f60;}

   #btn div{
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    margin-top:-20px;
    color:#fff;
    background:#999;
    background:rgba(0,0,0,.5);
    font-size:20px;
    font-weight:bold;
    font-family:'Microsoft yahei';
    line-height:40px;
    text-align:center;
    cursor:pointer;
   }
   #btn div#left{ left:0;}
   #btn div#right{ right:0;}

  </style>
 </head>
 <body>
  <div id="wrap">
   <div id="pic">
    <img src="img/1.jpg" alt="" />
    <img src="img/2.jpg" alt="" />
    <img src="img/3.jpg" alt="" />
    <img src="img/4.jpg" alt="" />
   </div>
   <div id="tab">
    <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div id="btn">
    <div id='left'><</div>
    <div id='right'>></div>
   </div>
  </div>
  <script>
   var oWrap=document.getElementById('wrap')
   var picImg=document.getElementById('pic').getElementsByTagName('img');
   var tabLi=document.getElementById('tab').getElementsByTagName('li');
   var btnDiv=document.getElementById('btn').getElementsByTagName('div');
   
   function Banner(oWrap,picImg,tabLi,btnDiv){
    this.wrap=oWrap
    this.list=picImg
    this.tab=tabLi
    this.btn=btnDiv
    this.index=0; //这些都必须是私有的，不然两个banner会一样
    this.timer=null;
    this.length=this.tab.length;
    
   // this.init();//下面创建好，要在这里执行
    
   }
   
   //初始化分类
   Banner.prototype.init=function(){ //先把下面的分类
    var This=this; //var 一个This变量把this存起来
    this.list[0].style.display='block';
    this.tab[0].className='on';
    
    for(var i=0;i<this.length;i++){
    this.tab[i].index=i; 
    this.tab[i].onclick=function(){
     //this.list[index].style.display='none'; 这里的this指向tab的this 
     This.list[This.index].style.display='none'; 
     This.tab[This.index].className='';
     //index=this.index;
     This.index=this.index;
     This.list[This.index].style.display='block';
     //This.tab[This.index].className='on'; 
     this.className='on';
    } 
   };
   
   for(var i=0;i<this.btn.length;i++){
    this.btn[i].index=i;
    this.btn[i].onselectstart=function(){ 
     return false;
    }
    this.btn[i].onclick=function(){
     This.list[This.index].style.display='none'; 
     This.tab[This.index].className='';
     if(this.index){
      This.index++;
      This.index%=This.length; 
     }else{
      This.index--;
      if(index<0)This.index=This.length-1;     
     }  
     This.list[This.index].style.display='block';
     This.tab[This.index].className='on'; 
    }
   }
    this.auto();
    this.clear();    
   };
   Banner.prototype.auto=function(){
     var This=this; 

     This.timer=setInterval(function(){ //一般都是向左轮播,index++
      This.list[This.index].style.display='none';
      This.tab[This.index].className='';
      This.index++;
      This.index%=This.length;
      This.list[This.index].style.display='block';
      This.tab[This.index].className='on';
     },2000)
   };
   
   Banner.prototype.clear=function(){
     var This=this;    
     this.wrap.onmouseover=function(){
      clearInterval(This.timer)
   }
     this.wrap.onmouseleave=function(){
      This.auto();
    } 
   };
   
   
   var banner1=new Banner(oWrap,picImg,tabLi,btnDiv);
   banner1.init();
  
  /*
   * init()
   * function init(){
   for(var i=0;i<tabLi.length;i++){
    tabLi[i].index=i; 
    tabLi[i].onclick=function(){
     picImg[index].style.display='none'; 
     tabLi[index].className='';
     index=this.index;
     picImg[index].style.display='block';
     tabLi[index].className='on'; 
    }    
   };
   
   
   }
   for(var i=0;i<btnDiv.length;i++){
    btnDiv[i].index=i;
    btnDiv[i].onselectstart=function(){ 
     return false;
    }
    btnDiv[i].onclick=function(){
     picImg[index].style.display='none'; 
     tabLi[index].className='';
     if(this.index){
      index++;
      index%=tabLi.length;
     }else{
      index--;
      if(index<0)index=tabLi.length-1;     
     }  
     picImg[index].style.display='block';
     tabLi[index].className='on';
    }    
   };
   auto();
   oWrap.onmouseover=function(){
    clearInterval(timer)
   }
   oWrap.onmouseleave=function(){
    auto();
   }
   function auto(){
    timer=setInterval(function(){ //一般都是向左轮播,index++
      picImg[index].style.display='none';
      tabLi[index].className='';
      index++;
      index%=tabLi.length;
      picImg[index].style.display='block';
      tabLi[index].className='on';
    },2000)
   };
   
   */
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现轮播图的两种方式(构造函数、面向对象)

- Author -

sayid~

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
写一个Vue Popup组件
Feb 25 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
React实践之Tree组件的使用方法
Sep 30 #Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 #Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 #Javascript
jqgrid实现简单的单行编辑功能
Sep 30 #Javascript
微信小程序富文本渲染引擎的详解
Sep 30 #Javascript
js实现数组和对象的深浅拷贝
Sep 30 #Javascript
node通过express搭建自己的服务器
Sep 30 #Javascript
底部导航(1) 计算器(5) 五子棋(12) 模型保存加载(1) format(1) 对齐打印(1) PyTorch(1) 图像处理(1) 人工智能(2) 井字棋(1)
You might like
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
javascript 闭包详解
2015/07/02 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
意大利巧克力店：Chocolate Shop
2019/07/24 全球购物
教师研修随笔感言
2014/01/23 职场文书
征婚广告词
2014/03/17 职场文书
机关作风建设整改方案
2014/10/27 职场文书
奖学金个人总结
2015/03/04 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
网吧管理制度范本
2015/08/05 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
解析MySQL索引的作用
2022/03/03 MySQL