利用JS写一个简单的轮播图

最新推荐文章于 2022-03-11 14:06:16 发布

旺旺大肉包

最新推荐文章于 2022-03-11 14:06:16 发布

阅读量695

点赞数 1

分类专栏： JavaScipt 文章标签： javascript css css3

本文链接：https://blog.csdn.net/da_bao_zi/article/details/122611924

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>当前页面</title>
	<style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding-left: 0;
        }

        .item {
            /*叠在一起	        */
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            /*透明度*/
            opacity: 0;
            /*淡入淡出图片的效果*/
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-color: yellowgreen;
        }

        .item:nth-child(2) {
            background-color: red;