js学习总结_轮播图之渐隐渐现版(实例讲解)

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
      font-size:14px;
      -webkit-user-select:none;
    }
    ul,li{
      list-style
    }
    img{
      display: block;
      border:none;
    }
    .banner{
      position:relative;
      width:1000px;
      height:300px;
      margin:0 auto;
      overflow:hidden;
    }
    .banner .bannerInner{
      width:100%;
      height:100%;
      background:url("../img/default.gif") no-repeat center center #e1e1e1;
    }
    .banner .bannerInner div{
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      z-index:0;
      opacity:0;
      filter:alpha(opacity=0);
    }
    .banner .bannerInner img{
      display:none;
      width:100%;
      height:100%s;
    }

    .banner .bannerTip{
      position:absolute;
      height:18px;
      overflow:hidden;
      right:20px;
      bottom:20px;
      z-index:10;
    }
    .banner .bannerTip li{
      float:left;
      margin-left:10px;
      width:18px;
      height:18px;
      background:lightblue;
      cursor:pointer;
      border-radius:50%;
    }
    .banner .bannerTip li.bg{
      background:red;
    }

    .banner a{
      display:none;
      position:absolute;
      top:50%;
      z-index:20;
      margin-top:-22.5px;
      width:30px;
      height:45px;
      background:url("../img/pre.png");
      opacity:0.5;
      filter:alpha(opacity=50);
    }
    .banner a:hover{
      opacity:1;
      filter:alpha(opacity=100);
    }
    .banner a.bannerLeft{
      left:20px;
      background-position:0 0;
    }
    .banner a.bannerRight{
      right:20px;
      background-position:-50px 0;
    }
  </style>
</head>
<body>
  <div class='banner' id='banner'>
    <div class='bannerInner'>
      <div><img src="/UploadFiles/2021-04-02/">

以上这篇js学习总结_轮播图之渐隐渐现版(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：js图片放大镜实例讲解(必看篇)
下一篇：Vue 2.0在IE11中打开项目页面空白的问题解决