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

网络编程发布日期：2024/9/29 浏览次数：1

正在浏览：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="/UploadFiles/2021-04-02/1.jpg">



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="/UploadFiles/2021-04-02/1.jpg">




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

上一篇：Easy UI动态树点击文字实现展开关闭功能

下一篇：React实践之Tree组件的使用方法

一句话新闻

Windows上运行安卓你用过了吗

在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。