网页编程网

www.youkud.com

当前位置：主页 >> DIV+CSS >> 正文

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

阅读：3273 输入：2020-05-25 15:48:37

<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>

上一篇：jquery实现手风琴最简代码
下一篇：css3实验登录页面

相关阅读: jq实现企业网站横幅焦点图切换; 面向对象实现js+ccs3幻灯特效带有内容提示; js图片自动轮播切换代码

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens