首页
所有分类
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 相关文章推荐
硬盘浏览程序，保存成网页格式便可使用
Dec 03 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
javascript修改图片src的方法
Jan 27 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
移动端界面的适配
Jan 11 Javascript
VUE元素的隐藏和显示（v-show指令)
Jun 23 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 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) R72E(1) WR-800F(1) DE1107(3) DE1102(1) 对讲机(1) SONY600GR(1) R9700(1) ICOM(2) R71E(1)
You might like
php使用cookie保存登录用户名的方法
2015/01/26 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python创建进程fork用法
2015/06/04 Python
理解Python中的With语句
2016/03/18 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
python基于爬虫+django，打造个性化API接口
2021/01/21 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
在校生钳工实习自我鉴定
2013/09/19 职场文书
广告业务员岗位职责
2014/02/06 职场文书
诚实守信演讲稿
2014/09/01 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
万里长城导游词
2015/01/30 职场文书
齐云山导游词
2015/02/06 职场文书
介绍信范文大全
2015/05/07 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python