轮播图完整架构

最新推荐文章于 2021-12-20 14:26:45 发布

cp02

最新推荐文章于 2021-12-20 14:26:45 发布

阅读量615

点赞数

文章标签： css html5 javascript

本文链接：https://blog.csdn.net/m0_49315169/article/details/118941285

版权

在这里插入图片描述

之前已经说过轮播图的基本架构了，这里就不对HTML和css做详细说明了
直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
    
        margin: 0;
        padding: 0;
    }
    .big{
    
        position: relative;
        margin-top: 100px;
        margin-left: 100px;
        width: 916px;
        height: 516px;
        border: 1px solid #000;
       overflow: hidden;
    }
    .small{
    
        display: none;
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius:25% ;
        top: 50%;
        margin-top: -50px;
        background-color: rgb(122, 170, 212);
        opacity:0.5;
        color: #000;
        text-align: center;
        line-height: 50px;
    }
    .dot{
    
       display:inline-block;
       position: absolute;
       height: 30px;
       width: 100px;
       bottom: 0%;
       left: 40%; 
    }
    .dot li{
    
      list-style:none;
      float: left;
      margin-left: 10px;
       width: 10px;
       height: 10px;
       background-color: #000;
       border-radius:50% ;
    }
    .dot ul ol:hover{
    
        background-color: #fff;
    }
    .img{
    
        position:absolute;
        top: 0;
        left: 0