码迷，mamicode.com
首页 > 其他好文 > 详细

假期小页面

时间：2017-10-09 02:15:13      阅读：247      评论：0      收藏：0      [点我收藏+]

标签：blog   col   自动   scale   节点   slide   ide   色彩   port   

<head>
        <meta charset="UTF-8">
        <title>travel</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <link href="css/travel.css" rel="stylesheet"/>
        <script src="js/travel.js" type="text/javascript"></script>
        
    </head>

    <body>
        
        
        <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="img/yuantiao.jpg">
                  </a>
                </div>
                <!-- 第一张 -->
                <div class="mui-slider-item">
                  <a href="#">
                    <img src="img/muwu.jpg"/>
                  </a>
                </div>
                <!-- 第二张 -->
                <div class="mui-slider-item">
                  <a href="#">
                    <img src="img/shuijiao.jpg"/>
                  </a>
                </div>
                
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                  <a href="#">
                    <img src="img/muwu.jpg"/>
                  </a>
                </div>
            </div>
            <!-- 两个点 -->
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
           </div>
        </div>
        
        
        <!--第二部分  手划区域 -->
        <div id="slider" class="mui-slider" >
            <div class="mui-slider mtop10 p">
                <div class="mui-slider-group">             
                    <div class="mui-slider-item">
                        <ul>
                            <li><img src="img/shuijiao.jpg"/></li>
                            <li>
                                <img src="img/muwu.jpg"/>
                                <span>风景</span>
                            </li>
                            <li>
                                <img src="img/shuijiao.jpg"/>
                                 <span>旅行微攻略</span>
                            </li>
                            <li>
                                <img src="img/muwu.jpg"/>
                                <span>旅行</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="mui-slider-item">
                        <ul>
                            <li><img src="img/shuijiao.jpg"/></li>
                            <li>
                                <img src="img/muwu.jpg"/>
                                <span>风景</span>
                            </li>
                            <li>
                                <img src="img/shuijiao.jpg"/>
                                 <span>旅行微攻略</span>
                            </li>
                            <li>
                                <img src="img/muwu.jpg"/>
                                <span>旅行</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>    
        
        
        <!--第三部分-旅行达人-->
        <div id="slider" class="mui-slider" >
            <div class="daren">
                <span>旅行达人</span>
                <div class="img">
                    <img src="img/right.png" style=""/>
                    <img src="img/touxiang1.jpg" style="transform: translateX(-25px); z-index: 1;"/>
                    <img src="img/touxiang2.jpg" style="transform: translateX(-15px); z-index: 0;"/>
                    <img src="img/touxiang3.jpg" style="z-index: 3;"/>
                </div>
            </div>
        </div>
        
        
        <!-- 第四部分 个人专区 -->
        <div id="slider" class="mui-slider mtop10 bgcolor-white p">
            <div class="fenqu1">
                <div class="geren">
                    <img src="img/touxiang2.jpg"/>
                    <span>方人影像</span>
                    <div class="care">关注</div>
                </div>
                <img src="img/shuijiao.jpg"/>
                <div class="text bgcolor-white">
                    <div>晒秋</div>
                    <div class="tan">#  <span>色彩</span><span>纪实</span>  国家地理摄影投稿    摄影    风光</div>
                    <span class="span bgcolor-white">................................................................</span>
                </div>    
            </div>
            <div class="fenqu2">
                <div class="tubiao">
                    <img src="img/dashboard_like_off_default.png" id="xin" onclick="z(1)"/>
                    <img src="img/dashboard_reply_default.png"/>
                    <img src="img/dashboard_reblog_default.png"/>
                    <img src="img/dashboard_recommend_off_default.png" id="zan" onclick="z(2)"/>
                    <span>。。。</span>
                </div>
                
                <div class="zi">
                    <span id="shu">130&nbsp;</span>热度&nbsp;&nbsp;
                    <span id="lun">6</span>条评论
                </div>
            </div>
        </div>
        
        <!-- 第四部分 个人专区 -->
        <div id="slider" class="mui-slider mtop10 bgcolor-white p">
            <div class="fenqu1">
                <div class="geren">
                    <img src="img/touxiang2.jpg"/>
                    <span>方人影像</span>
                    <div class="care">关注</div>
                </div>
                <img src="img/shuijiao.jpg"/>
                <div class="text bgcolor-white">
                    <div>晒秋</div>
                    <div class="tan">#  <span>色彩</span><span>纪实</span>  国家地理摄影投稿    摄影    风光</div>
                    <span class="span bgcolor-white">................................................................</span>
                </div>    
            </div>
            <div class="fenqu2">
                <div class="tubiao">
                    <img src="img/dashboard_like_off_default.png" id="xin" onclick="z(1)"/>
                    <img src="img/dashboard_reply_default.png"/>
                    <img src="img/dashboard_reblog_default.png"/>
                    <img src="img/dashboard_recommend_off_default.png" id="zan" onclick="z(2)"/>
                    <span>。。。</span>
                </div>
                
                <div class="zi">
                    <span id="shu">130&nbsp;</span>热度&nbsp;&nbsp;
                    <span id="lun">6</span>条评论
                </div>
            </div>
        </div>
        
        <!-- 第四部分 个人专区 -->
        <div id="slider" class="mui-slider mtop10 bgcolor-white p">
            <div class="fenqu1">
                <div class="geren">
                    <img src="img/touxiang2.jpg"/>
                    <span>方人影像</span>
                    <div class="care">关注</div>
                </div>
                <img src="img/shuijiao.jpg"/>
                <div class="text bgcolor-white">
                    <div>晒秋</div>
                    <div class="tan">#  <span>色彩</span><span>纪实</span>  国家地理摄影投稿    摄影    风光</div>
                    <span class="span bgcolor-white">................................................................</span>
                </div>    
            </div>
            <div class="fenqu2">
                <div class="tubiao">
                    <img src="img/dashboard_like_off_default.png" id="xin" onclick="z(1)"/>
                    <img src="img/dashboard_reply_default.png"/>
                    <img src="img/dashboard_reblog_default.png"/>
                    <img src="img/dashboard_recommend_off_default.png" id="zan" onclick="z(2)"/>
                    <span>。。。</span>
                </div>
                
                <div class="zi">
                    <span id="shu">130&nbsp;</span>热度&nbsp;&nbsp;
                    <span id="lun">6</span>条评论
                </div>
            </div>
        </div>
        
        <!-- 第四部分 个人专区 -->
        <div id="slider" class="mui-slider mtop10 bgcolor-white p">
            <div class="fenqu1">
                <div class="geren">
                    <img src="img/touxiang2.jpg"/>
                    <span>方人影像</span>
                    <div class="care">关注</div>
                </div>
                <img src="img/shuijiao.jpg"/>
                <div class="text bgcolor-white">
                    <div>晒秋</div>
                    <div class="tan">#  <span>色彩</span><span>纪实</span>  国家地理摄影投稿    摄影    风光</div>
                    <span class="span bgcolor-white">................................................................</span>
                </div>    
            </div>
            <div class="fenqu2">
                <div class="tubiao">
                    <img src="img/dashboard_like_off_default.png" id="xin" onclick="z(1)"/>
                    <img src="img/dashboard_reply_default.png"/>
                    <img src="img/dashboard_reblog_default.png"/>
                    <img src="img/dashboard_recommend_off_default.png" id="zan" onclick="z(2)"/>
                    <span>。。。</span>
                </div>
                
                <div class="zi">
                    <span id="shu">130&nbsp;</span>热度&nbsp;&nbsp;
                    <span id="lun">6</span>条评论
                </div>
            </div>
        </div>
        
        
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            
            mui.init();
            
            //获得slider插件对象
            var gallery = mui(‘#slider‘);
            gallery.slider({
              interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
            });
            
        </script>
    </body>

 

假期小页面

标签：blog   col   自动   scale   节点   slide   ide   色彩   port   

原文地址：http://www.cnblogs.com/HRurl/p/7639311.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！