注册 登录
Martin_ming
Martin_ming
  • 发布：2014-11-21 11:26
  • 更新：2014-11-21 11:59
  • 阅读：3993

选项卡里面包含图片轮播也就是mui-slider包含mui-slider，slide失效

分类：MUI

<div class="mui-scroll mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#item1">
新品
</a>
<a class="mui-control-item" href="#item2" >
价格
</a>
<a class="mui-control-item" href="#item3">
销量
</a>
<a class="mui-control-item" href="#item4">
人气
</a>
</div> 

        <!-- 轮播图 -->  
        <div id="slider" class="mui-slider">  
            <div class="mui-slider-group">  
                <!-- 第一张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="images/shuijiao.jpg">  
                    </a>  
                </div>  
                <!-- 第二张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="images/shuijiao.jpg">  
                    </a>  
                </div>  
                <!-- 第三张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="images/yuantiao.jpg">  
                    </a>  
                </div>  
            </div>  
            <div class="mui-slider-indicator">  
                <div class="mui-indicator mui-active"></div>  
                <div class="mui-indicator"></div>  
                <div class="mui-indicator"></div>  
            </div>  
        </div>  
        <div class="mui-slider-group">  
            <div id="item1" class="mui-slider-item mui-control-content mui-active">  
                <div class="mui-content-padded">  
                    <h4 class="title">热销<span class="color-red">爆款</span></h4>  
                </div>  
                <ul class="mui-table-view">  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img src="images/shuijiao.jpg" class="mui-media-object mui-pull-left">  
                            <div class="mui-media-body mui-ellipsis">  
                                2014秋冬新款韩版女装休闲宽松几何图案百搭 套头针织衫毛衣  
                                <p>EC女装批发</p>  
                            </div>  
                        </a>  
                    </li>  

                    <li class="mui-table-view-cell mui-media">  
                        <a href="">  
                            <img src="images/shuijiao.jpg" class="mui-media-object mui-pull-left">  
                            <div class="mui-media-body mui-ellipsis">  
                                cared  
                                <p>want to a room</p>  
                            </div>  
                        </a>  
                    </li>  
                </ul>  
            </div>  
            <!--第二个选项卡内容区，页面加载时为空-->  
            <div id="item2" class="mui-slider-item mui-control-content"></div>  
            <!--第三个选项卡内容区，页面加载时为空-->  
            <div id="item3" class="mui-slider-item mui-control-content"></div>  
        </div>  
    </div>
2014-11-21 11:26 负责人:无 分享

没有找到相关结果

    已邀请:
    DCloud_UNI_FXY

    DCloud_UNI_FXY 

    <div class="mui-content">  
            <div id="slider" class="mui-slider">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item" href="#item1mobile">  
                待办公文  
            </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                已办公文  
            </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                全部公文  
            </a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="gallery" 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">  
                                    </a>  
                                </div>  
                                <!-- 第一张 -->  
                                <div class="mui-slider-item">  
                                    <a href="#">  
                                        <img src="../images/shuijiao.jpg">  
                                    </a>  
                                </div>  
                                <!-- 第二张 -->  
                                <div class="mui-slider-item">  
                                    <a href="#">  
                                        <img src="../images/muwu.jpg">  
                                    </a>  
                                </div>  
                                <!-- 第三张 -->  
                                <div class="mui-slider-item">  
                                    <a href="#">  
                                        <img src="../images/cbd.jpg">  
                                    </a>  
                                </div>  
                                <!-- 第四张 -->  
                                <div class="mui-slider-item">  
                                    <a href="#">  
                                        <img src="../images/yuantiao.jpg">  
                                    </a>  
                                </div>  
                                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->  
                                <div class="mui-slider-item mui-slider-item-duplicate">  
                                    <a href="#">  
                                        <img src="../images/shuijiao.jpg">  
                                    </a>  
                                </div>  
                            </div>  
                            <div class="mui-slider-indicator">  
                                <div class="mui-indicator mui-active"></div>  
                                <div class="mui-indicator"></div>  
                                <div class="mui-indicator"></div>  
                                <div class="mui-indicator"></div>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div class="mui-loading">  
                            <div class="mui-spinner">  
                                <div class="mui-spinner-indicator mui-spinner-indicator12"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator11"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator10"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator9"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator8"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator7"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator6"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator5"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator4"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator3"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator2"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator1"></div>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div class="mui-loading">  
                            <div class="mui-spinner">  
                                <div class="mui-spinner-indicator mui-spinner-indicator12"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator11"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator10"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator9"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator8"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator7"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator6"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator5"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator4"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator3"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator2"></div>  
                                <div class="mui-spinner-indicator mui-spinner-indicator1"></div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  

            <h5 class="mui-content-padded">Color</h5>  
            <div class="mui-card">  
                <form class="mui-input-group">  
                    <div class="mui-input-row mui-radio">  
                        <label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>  
                        </label>  
                        <input name="radio1" type="radio" checked value="primary">  
                    </div>  
                    <div class="mui-input-row mui-radio">  
                        <label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>  
                        </label>  
                        <input name="radio1" type="radio" value="positive">  
                    </div>  
                    <div class="mui-input-row mui-radio">  
                        <label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>  
                        </label>  
                        <input name="radio1" type="radio" value="negative">  
                    </div>  
                </form>  
            </div>  

        </div>
    2014-11-21 11:59 分享
    为什么被折叠? 0 个回复被折叠

    该问题目前已经被锁定, 无法添加新回复

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报