全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：400-708-3566

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

本文实例为大家分享了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'>&lt;</div>
    <div id='right'>&gt;</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'>&lt;</div>
    <div id='right'>&gt;</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  # 轮播图  # js核心基础之构造函数constructor用法实例分析  # 深入浅析js原型链和vue构造函数  # 详解Javascript 中的 class、构造函数、工厂函数  # 详解JS构造函数中this和return  # Javascript中获取对象的原型对象的方法小结  # 深入理解javascript构造函数和原型对象  # 一文秒懂JavaScript构造函数、实例、原型对象以及原型链  # 都是  # 都有  # 自定义  # 要在  # 先把  # 大家分享  # 就等于  # 具体内容  # 值为  # 大家多多  # 面向对象  # 清空  # 都必须  # tab  # display  # left  # top  # bottom  # pic  # relative 


相关文章： C++中的Pimpl idiom是什么，有什么好处？（隐藏实现）  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  制作表格网站有哪些,线上表格怎么弄？  如何做静态网页,sublimetext3.0制作静态网页？  网站制作需要会哪些技术,建立一个网站要花费多少？  网站网页制作专业公司,怎样制作自己的网页？  建站之星如何助力企业快速打造五合一网站？  c# 服务器GC和工作站GC的区别和设置  招商网站制作流程,网站招商广告语？  如何用狗爹虚拟主机快速搭建网站？  如何用美橙互联一键搭建多站合一网站？  大型企业网站制作流程,做网站需要注册公司吗？  定制建站价位费用解析与套餐推荐全攻略  c# 在ASP.NET Core中管理和取消后台任务  建站之星与建站宝盒如何选择最佳方案？  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去？  如何快速搭建二级域名独立网站？  已有域名建站全流程解析：网站搭建步骤与建站工具选择  seo网站制作优化,网站SEO优化步骤有哪些？  小型网站建站如何选择虚拟主机？  h5在线制作网站电脑版下载,h5网页制作软件？  建站主机选哪种环境更利于SEO优化？  网站制作报价单模板图片,小松挖机官方网站报价？  平台云上自助建站如何快速打造专业网站？  建站之星如何优化SEO以实现高效排名？  ,制作一个手机app网站要多少钱？  武汉外贸网站制作公司,现在武汉外贸前景怎么样啊？  如何用搬瓦工VPS快速搭建个人网站？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  如何在宝塔面板中创建新站点？  自助网站制作软件,个人如何自助建网站？  建站主机是什么？如何选择适合的建站主机？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  如何用低价快速搭建高质量网站？  制作国外网站的软件,国外有哪些比较优质的网站推荐？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  宁波免费建站如何选择可靠模板与平台？  linux top下的 minerd 木马清除方法  行程制作网站有哪些,第三方机票电子行程单怎么开？  建站之星微信建站一键生成小程序+多端营销系统  已有域名和空间如何快速搭建网站？  常州自助建站工具推荐：低成本搭建与模板选择技巧  魔方云NAT建站如何实现端口转发？  如何在Windows虚拟主机上快速搭建网站？  制作公司内部网站有哪些,内网如何建网站？  完全自定义免费建站平台：主题模板在线生成一站式服务  深入理解Android中的xmlns:tools属性  建站之星导航菜单设置与功能模块配置全攻略 

返回目录 在线咨询
上一篇：如何监测和分析网站的SEO表现_SEO优化教程
下一篇：PHP中在HTML链接或按钮中正确传递变量的教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

©  云南转妮洋科技有限公司 版权所有   滇ICP备2024034437号 
联系电话： 400-708-3566   E-mail：915688610@qq.com
主营业务：网络营销推广、网站SEO优化、网站定制、营销型网站建设、微商城制作、三级分销系统开发
电话沟通
在线客服