1、 定义几个div 容器 2、 引入swiper.min.js <div class="base-wrap"> <div class="top"> <div class="topL"><a href="../video_live/video_live.html">小视频</a></div> <div class="topL"><a href="love_success.html">配对成功</a></div> <div class="topR"><a href="javascript:;">设置</a></div> </div> <div style="position: relative"> <div class="bg1" style="padding: 0"> <div class="bgin1"></div> </div> <div class="swiper-container" dir="rtl"> <div class="swiper-wrapper" id="userlist-content"> <!--循环开始--> <div class="swiper-slide swiper-slide-0" data-slideindex="0" data-userid="3"> <div class="swiperin"> <a href="../user_center/other_user_index.html?uid=3"> <div class="simg"> <!--<div class="iconImg">--> <!--<i class="iconimg"></i>--> <!--<span><!–照片数-–></span>--> <!--</div>--> <!--<img src="http://39.106.161.5:8081/image/images/3/100_461_100.jpg" style="width: 350px; height: 350px;max-width: 350px" />--> </div> </a> <div class="sname"> <div style="color:#FF3366; text-align:center">...正在查找附近的人</div> <div class="snamein"> <!--昵称---> <!--<span class="sex"> <i class="sexin"></i> <!–age-–> </span>--> </div> </div> <div class="tag1"> <!--<span> <!–交友类别-–> </span>--> <!--<span><!–身高-–></span>--> <!--<span><!–学历-–></span>--> </div> </div> </div> <div class="swiper-slide swiper-slide-1" data-slideindex="1" data-userid="4"> <div class="swiperin"> <a href="../user_center/other_user_index.html?uid=4"> <div class="simg"> <div class="iconImg"> <i class="iconimg"></i> <span>+100</span> </div> <!--<img src="http://39.106.161.5:8081/image/images/4/user-head-img-24715584181917839.jpg" style="width: 350px; height: 350px;max-width: 350px" />--> </div> </a> <div class="sname"> <div class="snamein"> 爱上瓜的猫 <span class="sex"> <i class="sexin"></i> 29 </span> </div> </div> <div class="tag1"> <span>交友</span> <span>173cm</span> <span>大专</span> </div> </div> </div> <div class="swiper-slide swiper-slide-2" data-slideindex="2" data-userid="5"> <div class="swiperin"> <a href="../user_center/other_user_index.html?uid=5"> <div class="simg"> <div class="iconImg"> <i class="iconimg"></i> <span>+100</span> </div> <!--<img src="http://39.106.161.5:8081/image/images/5/100_580_100.jpg" style="width: 350px; height: 350px;max-width: 350px" />--> </div> </a> <div class="sname"> <div class="snamein"> 旧友。 <span class="sex"> <i class="sexin"></i> 17 </span> </div> </div> <div class="tag1"> <span>交友&婚恋</span> <span>168cm</span> <span>高中及以下</span> </div> </div> </div> <div class="swiper-slide swiper-slide-3" data-slideindex="3" data-userid="6"> <div class="swiperin"> <a href="../user_center/other_user_index.html?uid=6"> <div class="simg"> <div class="iconImg"> <i class="iconimg"></i> <span>+100</span> </div> <!--<img src="http://39.106.161.5:8081/image/images/6/1000_GX2_970.jpg" style="width: 350px; height: 350px;max-width: 350px" />--> </div> </a> <div class="sname"> <div class="snamein"> 舟山化小眼睛第一名的或容容 <span class="sex"> <i class="sexin"></i> 15 </span> </div> </div> <div class="tag1"> <span>婚恋</span> <span>168cm</span> <span>硕士</span> </div> </div> </div> <div class="swiper-slide swiper-slide-4" data-slideindex="4" data-userid="7"> <div class="swiperin"> <a href="../user_center/other_user_index.html?uid=7"> <div class="simg"> <div class="iconImg"> <i class="iconimg"></i> <span>+100</span> </div> <!--<img src="http://39.106.161.5:8081/image/images/7/100_352_099.jpg" style="width: 350px; height: 350px;max-width: 350px" />--> </div> </a> <div class="sname"> <div class="snamein"> 刘濡郗 <span class="sex"> <i class="sexin"></i> 29 </span> </div> </div> <div class="tag1"> <span>交友</span> <span>170cm</span> <span>本科</span> </div> </div> </div> <div class="swiper-slide swiper-slide-5" data-slideindex="5" data-userid="8"> <div class="swiperin"> <a href="../user_center/other_user_index.html?uid=8"> <div class="simg"> <div class="iconImg"> <i class="iconimg"></i> <span>+100</span> </div> <!--<img src="http://39.106.161.5:8081/image/images/8/100_163_100.jpg" style="width: 350px; height: 350px;max-width: 350px" />--> </div> </a> <div class="sname"> <div class="snamein"> 赛哥不姓赛 <span class="sex"> <i class="sexin"></i> 22 </span> </div> </div> <div class="tag1"> <span>交友</span> <span>167cm</span> <span>硕士</span> </div> </div> </div> <div class="swiper-slide swiper-slide-6" data-slideindex="6" data-userid="10"> <div class="swiperin"> <a href="../user_center/other_user_index.html?uid=10"> <div class="simg"> <div class="iconImg"> <i class="iconimg"></i> <span>+100</span> </div> <!--<img src="http://39.106.161.5:8081/image/images/10/100_200_100.jpg" style="width: 350px; height: 350px;max-width: 350px" />--> </div> </a> <div class="sname"> <div class="snamein"> 吃着胡萝卜去唱歌 <span class="sex"> <i class="sexin"></i> 15 </span> </div> </div> <div class="tag1"> <span>婚恋</span> <span>172cm</span> <span>硕士</span> </div> </div> </div> <!--循环结束--> </div> </div> </div> <!--底部操作栏--> <div class="bottom" > <ul class="ul"> <li class="list01"> <a href="javascript:;" data-islike="0" class="likebtn"> <img src="../img/tantan/youyue01.png" alt=""> </a> </li> <li class="list02"> <a href="javascript:;" class="chatbtn"> <img src="../img/tantan/youyue02.png" alt=""> </a> </li> <li class="list03"> <a href="javascript:;" data-islike="1" class="likebtn"> <img src="../img/tantan/youyue03.png" alt=""> </a> </li> </ul> </div> <!-- Black2 喜欢--> <div class="Black2 B_like" style="display:none"> <div class="Bin2"> <div class="bimg2 xiehou"> <img src="../img/tantan/like.png" alt=""> </div> <div class="know know_like"> <a href="javascript:;" class="knowin">我知道啦</a> </div> </div> </div> <!-- 不喜欢 --> <div class="Black2 B_dislike" style="display:none"> <div class="Bin2"> <div class="bimg2 sorry"> <img src="../img/tantan/dislike.png" alt=""> </div> <div class="know know_dislike"> <a href="javascript:;" class="knowin">我知道啦</a> </div> </div> </div> <!--开始页面 --> <div class="Black1" style="display:none"> <div class="blackin1"> <div class="choose_sex"> <div class="chooseTitle"> 请选择您想查看的性别和年龄段 <div class="guanbi"><i></i> </div> </div> <div class="sexC"> <ul> <!--<li class="" data-sex="1">--> <!--<!–<a href="javascript:;">–>--> <!--<!–<span class="yicon">–>--> <!--<!–<span class="yicon yiconin">–>--> <!--<!–<img src="../img/tantan/xiehouboy.png" alt="" style="width:100%">–>--> <!--<!–</span>–>--> <!--<!–<i class="ZT"></i>–>--> <!--<!–</span>–>--> <!--<!–<p>帅哥</p>–>--> <!--<!–</a>–>--> <!--</li>--> <li class="active" data-sex="2"> <a href="javascript:;"> <span class="yicon"> <span class="yiconin"> <img src="../img/tantan/xiehougril.png" alt="" style="width:100%"> </span> <i class="ZT"></i> </span> <p>美女</p> </a> </li> </ul> </div> <div class="age"> <div class="agein"> <div class="demo"> <input class="range-slider" id="agescope" type="hidden" value="18,35" /> </div> <p class="NL">年龄</p> <div class="nl_range"> <!-- <i class="i_left"><input type="text" value="18"></i> --> <i class="i_left">18</i> - <!-- <i class="i_right"><input type="text" value="55"></i> --> <i class="i_right">55</i> </div> </div> </div> <div class="begin"> <a href="javascript:;">开始缘分</a> </div> </div> </div> </div> <input type="hidden" id="sel-sex" value="2" /> </div>
最后加上样式:
5、数据从后段服务器存取
6、演示网站 :
http://yuecao.cc:8088/jiaoyou/user_list/love.html
7、不懂的联系 丘丘 : 823627970