探探的左划右html开发

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>&lt;!&ndash;照片数-&ndash;&gt;</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> &lt;!&ndash;age-&ndash;&gt; </span>-->
                            </div>
                        </div>
                        <div class="tag1">
                            <!--<span> &lt;!&ndash;交友类别-&ndash;&gt; </span>-->
                            <!--<span>&lt;!&ndash;身高-&ndash;&gt;</span>-->
                            <!--<span>&lt;!&ndash;学历-&ndash;&gt;</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>交友&amp;婚恋</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">-->
                            <!--&lt;!&ndash;<a href="javascript:;">&ndash;&gt;-->
                                <!--&lt;!&ndash;<span class="yicon">&ndash;&gt;-->
                                    <!--&lt;!&ndash;<span class="yicon yiconin">&ndash;&gt;-->
                                        <!--&lt;!&ndash;<img src="../img/tantan/xiehouboy.png" alt="" style="width:100%">&ndash;&gt;-->
                                    <!--&lt;!&ndash;</span>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<i class="ZT"></i>&ndash;&gt;-->
                                <!--&lt;!&ndash;</span>&ndash;&gt;-->
                                <!--&lt;!&ndash;<p>帅哥</p>&ndash;&gt;-->
                            <!--&lt;!&ndash;</a>&ndash;&gt;-->
                        <!--</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