弹性盒模型flex+绝对定位实现幻灯轮播

主页 M

弹性盒模型flex+绝对定位实现幻灯轮播

2020-05-25 网页编程网 网页编程网

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style> 
* {margin:0;padding:0}
.banner{
    width: 1090px;
    height: 429px;
    margin: 0 auto;
    background-color:blue;
}
.banner ul{
    position: relative;
    display: flex;/*不管width*/
    align-items: flex-end;
    list-style: none;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: pink;
}
.banner ul li{
    flex: 1;/*每个li占总宽度的1份*/
    height: 35px;
    line-height: 35px;
    background-color:orange;
    border: 1px solid red;
    text-align: center;
    box-shadow: 0 -3px 0 #cea861 inset;/*下方的阴影*/
}
.banner ul li:hover{
    background-color: #f7f7f6;
}
.banner ul li img{
    opacity: 0;/*透明度*/
    position: absolute;
    left: 0;
    top: 0;
    width:300px;
}
.banner ul li:hover img{
    opacity:1;
}
.banner ul li:nth-child(1) img{/*默认第一个要显示，第几个子元素*/
opacity:1;
}
</style> 
</head> 
<body> 
<div class="banner">
<ul>
    <li>我真心爱你<img src="1.jpg" /></li>
    <li>我真心爱你<img src="2.jpg" /></li>
    <li>我真心爱你<img src="3.jpg" /></li>
    <li>我真心爱你<img src="4.jpg" /></li>
    <li>我真心爱你<img src="5.jpg" /></li>
</ul>
</div>
</body>

阅读原文

阅读 3275

123 显示电脑版