图片轮播效果

最新推荐文章于 2021-12-09 15:31:24 发布

xitingweiyu

最新推荐文章于 2021-12-09 15:31:24 发布

阅读量369

点赞数

分类专栏：代码学习

本文链接：https://blog.csdn.net/xitingweiyu/article/details/52126024

版权

最近在学习网上的视频，看到一个不错的图片轮播讲解，所以把代码重新写了一遍，作为学习参考！希望自己在以后的日子里不断学习！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <title>轮播效果</title>
</head>
<style>
    *{
     margin: 0;padding: 0;}
    ul{
     list-style: none;}
    .out {
     width:730px;height:454px;margin:50px auto;position:relative;}
    .out .img li{
     position:absolute; top:0;left:0;display: none;}
    .out .num{
     position:absolute;bottom:20px;left:0;font-size:0;text-align: center;width: