好用的幻灯片

http://www.swiper.com.cn/api/pagination/2014/1217/69.html

效果各种好

需要引用样式及js

<link href="css/swiper.min.css" rel="stylesheet">

<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/swiper.min.js"></script>

css:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, select {
    margin: 0;
    padding: 0;
    font-family: microsoft yahei, Arial, Helvetica, sans-serif;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html, body {
    position: relative;
    height: 100%;
}

body {
    padding-top: 45px;
    position: relative;
    background: #fff;
    font-size: 14px;
    color: #666;
}

ul li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/*导航
****************************/
header {
    position: fixed;
    z-index: 9999;
    top: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #ff6766;
}

header nav a {
    display: block;
    width: 33.3333333%;
    text-align: center;
    color: #fff;
    font-size: 16px;
    float: left;
}
header nav a:visited{
    color: #fff;
}
header nav .active {
    background: #fd807f;
}

header .back {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    font-size: 20px;
    text-align: center;
    color: #fff;
}

header .back:active {
    background: #f86564;
}

header .back i{
    display: block;
    height: 45px;
    line-height: 45px;
}
header .submit {
    display: block;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 50px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    text-align: center;
    color: #fff;
    background: #54cacb;
}

header .submit:active {
    background: #43b4b5;
}

/*我的素材
****************************/
.mysource {
    padding: 30px 10px 10px 10px;
}

.mysource > li {
    width: 100%;
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.mysource > li .time {
    width: 80px;
    height: 80px;
    font-size: 30px;
    color: #666;
    font-weight: bold;
    background: #fff;
    float: left;
}
.mysource > li>a{
    display: block;
    color: #666;
}
.mysource > li .time span {
    font-size: 14px;
}

.mysource > li .pic {
    position: relative;
    z-index: 9;
    width: 80px;
    height: 80px;
    background: #fff;
    float: left;
}

.mysource > li .pic > li {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    float: left;
}

.mysource > li .pic i {
    display: block;
    color: #fff;
    background: #54cacb;
    text-align: center;
    line-height: 80px;
    font-size: 30px;
    font-style: normal;
}

.mysource > li .pic a {
    display: block;
    width: 80px;
    height: 80px;
    color: #fff;
    background: #fff;
    text-align: center;
    line-height: 80px;
    font-size: 30px;
    font-style: normal;
}

.mysource > li .pic a i {
    background: #ccc;
    color: #fff;
    height: 80px;
}

.mysource > li .pic > li:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: #fff;
}

.mysource > li .pic > li:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #fff;
}

.mysource > li .pic img {
    width: 100%;
}

.mysource > li .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.mysource > li .text .p1 {
    position: relative;
    padding-top: 3px;
    padding-left: 165px;
    overflow: hidden;
    line-height: 18px;
    font-size: 13px;
}

.mysource > li .text .p2 {
    padding-left: 165px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    color: #999;
}

.mysource > li .text .more-point:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 20px;
    text-align: center;
    background: #fff;
}

/*添加素材
****************************/
.addsource {
    height: 100%;
    background: #eaeaea;
}

.addsource .input-box {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-bottom: solid 1px #e6e6e6;
}

.addsource .input-box textarea {
    padding: 2.5%;
    width: 95%;
    height: 60px;
    border: none;
    outline: none;
    font-size: 15px;
}

.addsource .input-box .img-box {
    padding: 2.5%;
    width: 95%;
    float: left;
}

.addsource .input-box .img-box li {
    position: relative;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    float: left;
}

.addsource .input-box .img-box li .pic {
    width: 60px;
    height: 60px;
    overflow: hidden;
}

.addsource .input-box .img-box li img {
    width: 100%;
}

.addsource .input-box .img-box li .add-btn{
    display: block;
    width: 58px;
    height: 58px;
    color: #ddd;
    font-size: 30px;
    text-align: center;
    border: solid 1px #ddd;
}
.addsource .input-box .img-box li .add-btn i{
    display: block;
    width: 58px;
    height: 58px;
    line-height: 58px;
}
.addsource .input-box .img-box li .add-btn1{
    display: block;
    width: 58px;
    height: 58px;
    color: #ddd;
    font-size: 30px;
    text-align: center;
    border: solid 1px #ddd;
}
.addsource .input-box .img-box li .add-btn1 i{
    display: block;
    width: 58px;
    height: 58px;
    line-height: 58px;
}

.addsource .input-box .img-box li .fa-times-circle {
    display: block;
    position: absolute;
    top: -5px;
    right: -5px;
    color: #ff6766;
    font-size: 20px;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
}

.addsource .input-box-2 {
    margin-top: 25px;
    border-bottom: solid 1px #e6e6e6;
    background: #fff;
}

.addsource .input-box-2 li {
    position: relative;
    border-top: solid 1px #e6e6e6;
    min-height: 50px;
    line-height: 50px;
    overflow: hidden;
}

.addsource .input-box-2 li .tit {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 2.5%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fff;
    float: left;
}

.addsource .input-box-2 li>span {
    display: block;
    width: 97.5%;
    padding-right: 2.5%;
    min-height: 50px;
    text-align: right;
    color: #999;
    float: right;
}
div.tagsinput {
    padding-top: 10px;
    width: 70% !important;
    height: auto !important;
    overflow-y: auto;
    float: right;
}

div.tagsinput span.tag {
    width: auto;
    min-height: 25px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #e6e6e6;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: block;
    float: right;
    padding: 0 5px;
    text-decoration: none;
    background: #fff;
    color: #999;
    margin-right: 5px;
    margin-bottom: 5px;
    font-family: helvetica;
    font-size: 13px;
}

div.tagsinput span.tag a {
    font-weight: bold;
    color: #999;
    text-decoration: none;
    font-size: 11px;
}

div.tagsinput input {
    width: 50px !important;
    font-size: 14px;
    padding: 4px 5px;
    background: transparent;
    color: #999;
    outline: none;
    margin-right: 5px;
    margin-bottom: 5px;
    border:solid 1px #e6e6e6;
    border-radius: 2px;
}

div.tagsinput div {
    height: 25px;
    line-height: 25px;
    display: block;
    float: right;
}

.tags_clear {
    clear: both;
    width: 100%;
    height: 5px !important;
}

.not_valid {
    background: #FBD8DB !important;
    color: #90111A !important;
}

.addsource .input-box-2 li .note {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 2.5%;
    text-align: right;
    width: 70%;
    height: 50px;
    color: #999;
    background: #fff;
}

.addsource .input-box-2 li .ckbox {
    position: relative;
    padding: 3px;
    top: 10px;
    width: 44px;
    height: 24px;
    border-radius: 30px;
    background: #ccc;
    float: right;
    -webkit-transition: .5s;
}

.addsource .input-box-2 li .ckbox i {
    background: #fff;
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 25px;
}

.addsource .input-box-2 li .open {
    background: #44bf17;
}

.addsource .input-box-2 li .open i {
    float: right;
}

.view-person {
    display: none;
    padding-top: 65px;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #eaeaea;
}

.view-person li {
    position: relative;
    padding: 5px 2.5%;
    width: 95%;
    background: #fff;
    font-size: 13px;
    line-height: normal !important;
    color: #999;
}

.view-person li p {
    line-height: 30px !important;
    font-size: 16px;
    color: #666;
}

.view-person li:last-child {
    border-bottom: solid 1px #e6e6e6;
}

.view-person .active:after {
    content: "f00c";
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 24px !important;
    color: #44bf17;
    font: normal normal normal 14px/1 FontAwesome;
}

/*下级素材
****************************/
.subsource{
    padding: 20px 10px 10px 10px;
}
.subsource>li{
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-bottom: solid 1px #f1f1f1;
}
.subsource>li .left{
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    overflow: hidden;
}
.subsource>li .left img{
    width: 100%;
}
.subsource>li .right{
    padding-left: 50px;
}
.subsource>li .right .name{
    color: #5a6895;
    font-size: 14px;
    line-height: 25px;
}
.subsource>li .right .text{
    overflow: hidden;
    margin-bottom: 8px;
    line-height: 18px;
}
.subsource>li .right .more{
    position: relative;
    top: -10px;
    display: block;
    color: #5a6895;
}
.subsource>li .right .images{
    overflow: hidden;
}
.subsource>li .right .images>li{
    width: 32.333333%;
    margin: 0 1.5% 1.5% 0;
    float: left;
    overflow: hidden;
}
.subsource>li .right .images>li:nth-child(3n){
    margin: 0 0 1% 0;
}
.subsource>li .right .images>li img{
    width: 100%;
}
.subsource>li .right .images>li>i{
    width: 100%;
    height: 100%;
    display: block;
    color: #fff;
    background: #54cacb;
    text-align: center;
    font-size: 30px;
    font-style: normal;

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.subsource>li .right .time{
    position: relative;
    margin: 10px 0;
    color: #999;
}
.subsource>li .right .time p{
    color: #666;
}
.subsource>li .right .tag span{
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 2px 3px;
    font-size: 12px;
    color: #999;
    text-align: center;
    border: solid 1px #e6e6e6;
    border-radius: 3px;
}
.subsource>li .right .btnbox{
    position: absolute;
    right: 0;
    bottom: 0;
}
.subsource>li .right .btnbox a{
    display: block;
    color: #fff;
    background: #54cacb;
    margin-left: 5px;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 2px;
    float: left;
}
.subsource>li .right .btnbox .disabled,
.subsource>li .right .btnbox .disabled:active{
    background: #999;
}
.subsource>li .right .btnbox a i{
    padding-right: 3px;
}
.subsource>li .right .btnbox a:active{
    background: #43b4b5;
}
.swiper-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999999;
}
.swiper-slide {
    text-align: center;
    font-size: 36px;
    color: #fff;
    background: #000;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide i{
    font-style: normal;
}
.swiper-slide img{
    max-width: 100%;
}
.swiper-pagination-bullet{
    background: #ccc;
}
/*我的标签
****************************/
.mytags{
    margin-bottom: 10px;
    padding: 10px 10px 0 10px;
    overflow: hidden;
    border-bottom: solid 1px #e6e6e6;
}
.mytags>li{
    display: inline;
    padding: 5px;
    margin: 0 10px 10px 0;
    border: solid 1px #e6e6e6;
    border-radius: 3px;
    float: left;
}
.mytags>.active{
    background: #54cacb;
    color: #fff;
}
.mysource-tags{
    padding: 0 10px 10px 10px;
}

html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>下级素材</title>
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/swiper.min.css" rel="stylesheet">
    <link href="css/Source.css" rel="stylesheet">
</head>
<body>
<header>
    <nav>
        <a href="MySource.html"><i class="fa fa-user"></i> 我的素材</a>
        <a href="Subordinates.html" class="active"><i class="fa fa-users"></i> 下级素材</a>
        <a href="MyTags.html"><i class="fa fa-tags"></i> 我的标签</a>
    </nav>
</header>
<ul class="subsource">
   <li>
       <div class="left"><img src="images/temp/8.jpg"></div>
       <div class="right">
           <p class="name">自然堂代理</p>
           <p class="text">指出，中缅是亲密友好的邻居。建交65年来，中缅传统友谊历经风雨从未改变，中缅传统友谊历经风雨从未改变，各领域务实合作成果丰富，成为休戚与共的利益共同体和命运共同体。这是两国历代领导人和两国人民共同努力的结果，要倍加珍惜。</p>
           <ul class="images">
               <li><img src="images/temp/1.jpg"></li>
               <li><img src="images/temp/2.jpg"></li>
               <li><img src="images/temp/3.jpg"></li>
               <li><img src="images/temp/4.jpg"></li>
               <li><img src="images/temp/5.jpg"></li>
               <li><img src="images/temp/6.jpg"></li>
               <li><img src="images/temp/7.jpg"></li>
               <li><img src="images/temp/8.jpg"></li>
               <li><img src="images/temp/9.jpg"></li>
           </ul>
           <div class="time">
               2015-6-12
               <div class="btnbox">
                   <a href="javascript:void(0)"><i class="fa fa-refresh"></i>同步</a>
                   <a href="javascript:void(0)"><i class="fa fa-floppy-o"></i>保存</a>
               </div>
           </div>
           <p class="tag"><span>自然堂</span><span>雅诗兰黛</span><span>菲诗小铺</span><span>巴宝莉</span></p>
       </div>
    </li>
    <li>
        <div class="left"><img src="images/temp/7.jpg"></div>
        <div class="right">
            <p class="name">丸美代理</p>
            <p class="text">成为休戚与共的利益共同体和命运共同体。这是两国历代领导人和两国人民共同努力的结果，要倍加珍惜。</p>
            <ul class="images">
                <li><img src="images/temp/8.jpg"></li>
                <li><img src="images/temp/9.jpg"></li>
                <li><img src="images/temp/10.jpg"></li>
                <li><img src="images/temp/13.jpg"></li>
            </ul>
            <div class="time">
                2015-6-12
                <div class="btnbox">
                    <a href="javascript:void(0)" class="disabled"><i class="fa fa-refresh"></i>同步</a>
                    <a href="javascript:void(0)"><i class="fa fa-floppy-o"></i>保存</a>
                </div>
            </div>
            <p class="tag"><span>自然堂</span><span>雅诗兰黛</span><span>菲诗小铺</span><span>巴宝莉</span></p>
        </div>
    </li>
    <li>
        <div class="left"><img src="images/temp/13.jpg"></div>
        <div class="right">
            <p class="name">丸美代理</p>
            <p class="text">成为休戚与共的利益共同体和命运共同体。这是两国历代领导人和两国人民共同努力的结果，要倍加珍惜。</p>
            <ul class="images">
                <li><img src="images/temp/9.jpg"></li>
            </ul>
            <div class="time">
                2015-6-12
                <div class="btnbox">
                    <a href="javascript:void(0)"><i class="fa fa-refresh"></i>同步</a>
                    <a href="javascript:void(0)"><i class="fa fa-floppy-o"></i>保存</a>
                </div>
            </div>
            <p class="tag"><span>自然堂</span><span>雅诗兰黛</span><span>菲诗小铺</span><span>巴宝莉</span></p>
        </div>
    </li>
    <li>
        <div class="left"><img src="images/temp/10.jpg"></div>
        <div class="right">
            <p class="name">丸美代理</p>
            <p class="text">论装逼的重要性。</p>
            <ul class="images">
                <li><i>PDF</i></li>
            </ul>
            <div class="time">
                <p>2015-6-12</p>
                <div class="btnbox">
                    <a href="javascript:void(0)"><i class="fa fa-refresh"></i>同步</a>
                    <a href="javascript:void(0)"><i class="fa fa-floppy-o"></i>保存</a>
                </div>
            </div>
            <p class="tag"><span>自然堂</span><span>雅诗兰黛</span><span>菲诗小铺</span><span>巴宝莉</span></p>
        </div>
    </li>
</ul>
<div class="swiper-container">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/swiper.min.js"></script>
<script>
    $(function(){
        function imgsize(){
            $(".images>li").height($(".images>li").width())
        };
        imgsize()
        $(window).resize(function(){imgsize();})
        $(".subsource>li").each(function(){
            var $this = $(this);
            if($(this).find(".images>li").length==1){
                if($(this).find(".images>li>img").length == 1){
                    $(this).find(".images>li").css({
                        "width":"50%",
                        "height":"auto"
                    });
                };
            }else if($(this).find(".images>li").length==4){
                $(this).find(".images>li").eq(1).css({
                    "margin":"0 33.83333333% 1.5% 0"
                });
                $(this).find(".images>li").eq(2).css({
                    "margin":"0 1.5% 1.5% 0"
                });
            };
            if($(this).find(".text").height()>108){
                $(this).find(".text").css("height","110px");
                $(this).find(".text").after("<a href='javascript:void(0)' class='more'>全文</a>")
                var flag = 1;
                $(".more").click(function(){
                    if(flag==1){
                        $(".text").css("height","auto");
                        $(this).text("收起");
                        flag=0;
                    }else if(flag==0){
                        $(".text").css("height","110px");
                        $(this).text("全文");
                        flag=1;
                    }
                });
            };
            $(this).find(".images img").each(function(){
                $(this).click(function(){
                    var index =$(this).parent().index();
                    var imgstr = "";
                    for(var i=0;i<$this.find(".images>li").length;i++){
                        imgstr += '<div class="swiper-slide">'+$this.find(".images>li").eq(i).html()+'</div>';
                    };
                    $(".swiper-wrapper").html(imgstr);
                    $(".swiper-container").show()
                    var mySwiper = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        paginationClickable: true
                    });
                    mySwiper.attachEvents();
                    //跳转到指定
                    mySwiper.slideTo(index, 0, false);
                    $(".swiper-wrapper").click(function() {
                        $(".swiper-container").hide();
                        mySwiper.removeAllSlides()
                        mySwiper.detachEvents();
                    });
                });
            });
        });
    });
</script>
</body>
</html>

实例2：

分页的圆点当超过了显示宽度，实现了很好的自动显示

 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        //        nextButton: '.button-next',
        //        prevButton: '.button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 10,
        paginationBulletRender: function (index, className)
        {
            //生成swiper-slide 下方的数字按钮
            if ((index + 1) <= 10)
            {
                return '<span id="dibu' + (index + 1) + '" class="' + className + '">' + (index + 1) + '</span>';
            }
            else
            {
                return '<span id="dibu' + (index + 1) + '" style="display:none" class="' + className + '">' + (index + 1) + '</span>';
            }
        },
        onSlideChangeEnd: function (swiper)
        {
            var strETime = P_dtType.Rows[0][4];
            //获取当前是第几页，并获取主题id和主题名称//P_dibu
            var nIndex = swiper.activeIndex;
            //随滑动显示下面数字按钮，控制显示10个
            if (nIndex < 5)
            {
                for (var i = 1; i < P_dibu + 1; i++)
                {
                    if (i < 11)
                    {
                        $("#dibu" + i).css("display", "");
                    }
                    else
                    {
                        $("#dibu" + i).css("display", "none");
                    }
                }
            }
            else
            {
                var nIndexZuo = nIndex - 4;
                var nIndexYou = nIndex + 6;
                for (var i = 1; i < P_dibu + 1; i++)
                {
                    if (nIndexYou <= P_dibu)
                    {
                        if (i > nIndexZuo && i <= nIndexYou)
                        {
                            $("#dibu" + i).css("display", "");
                        }
                        else
                        {
                            if (P_dibu - nIndexZuo >= 0)
                            {
                                $("#dibu" + i).css("display", "none");
                            }
                        }
                    }
                    else
                    {
                        nIndexZuo = P_dibu - 10;
                        if (i > nIndexZuo && i <= P_dibu)
                        {
                            $("#dibu" + i).css("display", "");
                        }
                        else
                        {
                            
                                $("#dibu" + i).css("display", "none");
                            
                        }
                    }
                }
            }
            //判断是否为最后swiper-slide
            if (swiper.isEnd)
            {
                var sumGroup = 0;
                var sumPeople = 0;
                WxShare(P_dtShare, '一起微商_今日直播', '每天晚上网罗全微商最专业的微信群直播课，时时掌握行业动态和信息，并且可以申请互动收听，欢迎大家关注和分享！', '', '一起微商_今日直播：每天晚上网罗全微商最专业的微信群直播课，时时掌握行业动态和信息，并且可以申请互动收听，欢迎大家关注和分享！');
                for (var sum = 0; sum < dtTongji.Rows.length; sum++)
                {
                    sumGroup = sumGroup + dtTongji.Rows[sum][1] * 1;
                    sumPeople = sumPeople + dtTongji.Rows[sum][2] * 1;
                    $("#span_group").html(sumGroup);
                    $("#span_people").html(sumPeople);
                }
                //改变入群按钮
                if (strETime == "0")//判断是否为历史
                {
                    $("#a_Join").attr("href", "javascript:void(0)");
                    $("#a_Join").css("background", "#c4c4c4");
                    $("#a_url").attr("href", "javascript:void(0)");
                    $("#a_url").css("background", "#c4c4c4");
                }
                else
                {
                    $("#a_Join").attr("href", "javascript:void(0)");
                    $("#a_Join").html("入群");
                    $("#a_Join").css("background", "#c4c4c4");
                }
                //苹果二维码
                var u = navigator.userAgent, app = navigator.appVersion;
                var ios = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
                if (ios)
                {
                    //                    if (swiper.isEnd)
                    //                    {
                    $(".picbox2").fadeIn(1000);
                    //}
                }
            }
            else
            {


                //                if ((5 % 5) = 0)
                //                {
                //slidesGrid
                //                    for()
                //                    $("#dibu" + (nIndex+1)) 
                //                }
                P_JoinID = P_dtType.Rows[nIndex][0];
                //            var nPrevious = swiper.previousIndex;
                //            P_PreID = P_dtType.Rows[nPrevious][0];   
                        
                //根据导师信息生成微信分享信息
                WxShare(P_dtShare, P_dtType.Rows[nIndex][12] + ' 今日直播', P_dtType.Rows[nIndex][1], P_dtType.Rows[nIndex][7], P_dtType.Rows[nIndex][12] + "-" + P_dtType.Rows[nIndex][1]);
               
                //判断是否为首次进入该swiper-slide 或 该swiper-slide没有数据，如果是，读取并加载数据
                var strPageSearch = $("#ul_" + P_JoinID).html();
                if (strPageSearch == "<li><div class="loading"><i></i>加载中...</div></li>")
                {
                    P_intPageIndex = 1;
                    P_intRecordCount = 0;
                    LiveList();
                }
                else
                {
                    var pageCount = "PageCount" + P_JoinID;
                    P_intRecordCount = sessionStorage.getItem(pageCount);
                    var pageIndex = "PageIndex" + P_JoinID;
                    P_intPageIndex = sessionStorage.getItem(pageIndex);
                    var pageImg = "PageImg" + P_JoinID;
                    var strImg = sessionStorage.getItem(pageImg);
                    if (strImg != "" && strImg != null)//取出历史时，图片赋值为“”
                    {
                        if (strETime == "0")//判断是否为历史
                        {
                            $("#a_Join").attr("href", "javascript:void(0)");
                            $("#a_Join").css("background", "#c4c4c4");
                        }
                        else
                        {
                            $("#imgGroupCode").attr("src", strImg);
                            $("#a_Join").attr("href", "javascript:CodeShow()");
                            $("#a_Join").css("background", "#f77460");
                        }
                    }
                    else
                    {
                        $("#imgGroupCode").attr("src", "images/bg/nogroup-5-29.png");
                        $("#a_Join").attr("href", "javascript:void(0)");
                        $("#a_Join").css("background", "#c4c4c4");
                    }
                    //如果已有群数据，读取该群的群数和人数
                    var pageGroup = "PageGroup" + P_JoinID;
                    var pagePeople = "PagePeople" + P_JoinID;
                    $("#span_group").html(sessionStorage.getItem(pageGroup));
                    $("#span_people").html(sessionStorage.getItem(pagePeople));

                    if (P_isHis != "")
                    {
                        var pageTID = "PageTID" + P_JoinID;
                        var strID = sessionStorage.getItem(pageTID);
                        var pageRID = "PageRID" + P_JoinID;
                        var strRecID = sessionStorage.getItem(pageRID);
                        if (strRecID != "0")
                        {
                            $("#a_url").attr("href", "Details.html?recID=" + strRecID + "&tId=" + strID);
                            $("#a_url").css("background", "#54cacb");
                        }
                        else
                        {
                            $("#a_url").attr("href", "javascript:void(0)");
                            $("#a_url").css("background", "#c4c4c4");
                        }
                        $("#a_url").html("<i></i>回顾");
                    }
                }
            }
        },
        onSlideChangeStart: function (swiper)
        {
　　　　　　  //判断苹果
            var u = navigator.userAgent, app = navigator.appVersion;
            var ios = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (ios)
            {
                if (!swiper.isEnd)
                {
                    $(".picbox2").hide();
                }
            };
        }
    });