欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片轮播

程序员文章站 2022-05-31 11:54:32
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>


    <style type="text/css">
        div{
            width: 800px;
            height: 600px;
            transition: left 1s;
        }

        #q{
            width: 800px;
            height: 600px;
        }
        #one{
            position: relative;
            left: 15px;
            bottom: 50%;
        }

        #two{
            position: relative;
            bottom: 50%;
            left:90%;
        }

        ul{
            list-style-type:none ;
        }

        li{
            display: inline-block;
            width: 30px;
            height: 30px;

        }

    </style>
</head>
<body>

<div>
    <img src="img/0.jpg" id="q">
    <img src="img/图标.PNG" id="one">


图片轮播
图片轮播