js实现简单轮播效果

ゝ一世哀愁。 2022-06-09 08:45 177阅读 0赞

html：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link href="css/carousel.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      <div id="wrap">
        <ul id="banner">
          <li><img src="images/one.jpg"></li>
          <li><img src="images/two.jpg"></li>
          <li><img src="images/three.jpg"></li>
          <li><img src="images/four.jpg"></li>
          <li><img src="images/five.jpg"></li>
          <li><img src="images/six.jpg"></li>
        </ul>
        <ol id="number">
          <li class="on">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ol>
      </div>
    </body>
    <script src="js/carousel.js"></script>
    </html>

css：

*{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    #wrap{
      position: relative;
      width: 80%;
      height: 300px;
      overflow: hidden;
      margin: 0 auto;
      cursor: pointer;
    }
    
    #wrap ul{
      position: absolute;
      width: 100%;
    }
    
    #wrap ul li img{
      width: 100%;
      height: 300px;
    }
    
    #wrap ol{
      position: absolute;
      margin: 250px 50px;
    }
    
    #wrap ol li{
      float: left;
      margin-left: 5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background: #ccc;
      color: #000;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      cursor: pointer;
    }
    
    #wrap ol li.on, #wrap ol li:hover{
      background: #d4660f;
      color: #fff;
    }

js：