<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 </span>热度 <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 </span>热度 <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 </span>热度 <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 </span>热度 <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>