1772745730@qq.com
1772745730@qq.com
  • 发布:2017-06-06 16:36
  • 更新:2017-06-08 09:21
  • 阅读:1604

求解?图片轮播下标题怎么弄?

分类:MUI
2017-06-06 16:36 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_CHB

DCloud_UNI_CHB

Hello MUI中有图片轮播示例,其中有一个“下方悬浮标题”的示例,DOM结构如下:

<div id="slider" class="mui-slider">  
    <div class="mui-slider-group mui-slider-loop">  
        <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->  
        <div class="mui-slider-item mui-slider-item-duplicate">  
            <a href="#">  
                <img src="../images/yuantiao.jpg">  
                <p class="mui-slider-title">静静看这世界</p>  
            </a>  
        </div>  
        <div class="mui-slider-item">  
            <a href="#">  
                <img src="../images/shuijiao.jpg">  
                <p class="mui-slider-title">幸福就是可以一起睡觉</p>  
            </a>  
        </div>  
        <div class="mui-slider-item">  
            <a href="#">  
                <img src="../images/muwu.jpg">  
                <p class="mui-slider-title">想要一间这样的木屋,静静的喝咖啡</p>  
            </a>  
        </div>  
        <div class="mui-slider-item">  
            <a href="#">  
                <img src="../images/cbd.jpg">  
                <p class="mui-slider-title">Color of SIP CBD</p>  
            </a>  
        </div>  
        <div class="mui-slider-item">  
            <a href="#">  
                <img src="../images/yuantiao.jpg">  
                <p class="mui-slider-title">静静看这世界</p>  
            </a>  
        </div>  
        <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->  
        <div class="mui-slider-item mui-slider-item-duplicate">  
            <a href="#">  
                <img src="../images/shuijiao.jpg">  
                <p class="mui-slider-title">幸福就是可以一起睡觉</p>  
            </a>  
        </div>  
    </div>  
    <div class="mui-slider-indicator mui-text-right">  
        <div class="mui-indicator mui-active"></div>  
        <div class="mui-indicator"></div>  
        <div class="mui-indicator"></div>  
        <div class="mui-indicator"></div>  
    </div>  
</div>  

要回复问题请先登录注册