问题描述
轮播图 DIV无法撑开父元素
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
<!doctype html>
<html>
<head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <link rel="stylesheet" href="https://weui.shanliwawa.top/css/weui.css" /> <script src="https://weui.shanliwawa.top/js/zepto.min.js"></script> <script src="https://weui.shanliwawa.top/js/swipe.js"></script> <style> .container {position: absolute;top: 0;left: 0;right: 0;bottom: 1.0rem;overflow: auto;-webkit-overflow-scrolling: touch;} .slide_box {position: relative;} .slide {width:100%;overflow:hidden;position: relative;} .slide ul { position: absolute;width:400%;} .slide li {width:100%;float: left;} .slide {position: relative;max-width: 100%;overflow: hidden;margin: 0 auto;} .slide:after {content: '';display: block;width: 100%;padding-top: 50%; } .slide ul {position: absolute;left: 0;top: 0;width: 100%;height: 100%; } .slide li {list-style: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%; } .slide li:first-child {z-index: 1; } .slide li img { position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: none; } .slide .dot {position: absolute;width: 100%;text-align: center;bottom: 1.0rem;z-index: 5;font-size: 0; } .slide .dot span {display: inline-block;width: 6px;height: 6px;margin-left: 5px;border: 1px solid #fff;border-radius: 50%; } .slide .dot .cur {background-color: #c9caca; } .clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}
</style>
</head> <body ontouchstart> <div class="container"> <div style="height:300px;background:#000;color:#fff"> 占位置 </div> <div class="slide_box"> <!-- 轮播图start --> <div class="slide" id="slide3"> <ul> <li> <a href="###"> <div class="ad-pic"> <img src="https://www.shong.net/file/upload/202111/26/20211126124314494.jpg" alt=""> </div> <div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div> </a> </li> <li> <a href="###"> <div class="ad-pic"> <img src="https://www.shong.net/file/upload/202111/26/20211126124314494.jpg" alt=""> </div> <div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div> </a> </li> <li> <a href="###"> <div class="ad-pic"> <img src="https://www.shong.net/file/upload/202111/26/20211126124314494.jpg" alt=""> </div> <div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div> </a> </li> <li> <a href="###"> <div class="ad-pic"> <img src="https://www.shong.net/file/upload/202111/26/20211126124314494.jpg" alt=""> </div> <div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div> </a> </li> </ul> <div class="dot"> <span></span> <span></span> <span></span> <span></span> </div> </div> <!-- 轮播图end --> <div class="clearfloat"></div> </div> </div> <script type="text/javascript"> $(document).ready(function() { // 轮播图 $('#slide3').swipeSlide({ autoSwipe: false, //自动切换默认是 continuousScroll: true, lazyLoad: true, speed: 3000, transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)', firstCallback: function(i, sum, me) { me.find('.dot').children().first().addClass('cur'); }, callback: function(i, sum, me) { me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur'); } }); }); </script> </body>
</html>
你期待的结果是什么?实际看到的错误信息又是什么?
我想实现上面图片,下面文字描述的样式……
<div class="ad-tit">
这个标签的内容完全看不到。
待解决
悬赏分:20
- 离问题结束还有
点赞 0反对 0举报 0
收藏 0
分享 3
