轮播图 DIV无法撑开父元素

问题描述

轮播图 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 - 离问题结束还有 340天21小时48分41秒
反对 0举报 0 收藏 0

我来回答

回答4