首页
所有分类
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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
angularJS深拷贝详解
Mar 23 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
AngularJS实现注册表单验证功能
Oct 16 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
Tkinter(4) mp3Play(1) 数据处理(2) pandas(7) GUI(2) Pool(1) 矩阵(1) apply(1) 音频(1) agg(1)
You might like
JS 网站性能优化笔记
2011/05/24 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
JavaScript 参考教程
2006/12/29 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
JS图片压缩（pc端和移动端都适用）
2017/01/12 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
javascript中神奇的 Date对象小结
2017/10/12 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python爬虫超时的处理的实例
2018/12/19 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
一些.net面试题
2014/10/06 面试题
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Python基础之条件语句详解
2021/06/16 Python