手机端图文查看器

应需求人员要求，制作一款手机端的图文轮播查看器，要求达到“今日头条”，“凤凰网”app图文查看器的功能

html部分

<div class="swiper-container1">
    <div class="swiper-wrapper">
    </div>
</div>

js部分，引入了轮播插件 swiper

$(".swiper-container1").height($(window).height())//初始化高度

$(function(){
    function setHeight(){//初始化容器高度
        var wapHeight = $(window).height()-$(".xwTop").height()-$(".footBtnWap").height();
        $(".contWap").css({"height":wapHeight+"px","top":$(".xwTop").height()})
    }
    //模拟数据
    var data = [{img:"../images/img1.jpg",inf:'<p class="font14">1111</p><p class="top10 line18">东方国</p><p class="line18">东方国际考虑计量的顺口溜，三角 山东矿机接口上课  是，东方国际考虑计量的顺口溜，三角 山东矿机接口上课  是，东方国际考虑计量的顺口溜，三角 山东矿机接口上课  是，东方国际考虑计量的顺口溜，三角 山东矿机接口上课  是，多少分是否分</p>'},{img:"../images/img1_03.jpg",inf:'<p class="font14">2222</p>'},{img:"../images/img1_03.jpg",inf:'<p class="font14">3333</p>'}]
    for(i = 0 ; i<data.length ; i++){//创建图文容器
        $(".swiper-container1 .swiper-wrapper").append('<div class="swiper-slide"></div>')
    }
    function setPerHtml(i){//根据下角标获取每个容器的内容
            var html = '';
            html +=  '<img src="'+data[i].img+'" />';
            html += '<div class="contWap"><div class="bodyCont clearfix"><table class="m-table1 top20"><tr><td style="width:2rem;"><span class="font18 span">'+(i+1)+'</span><span class="span">/'+data.length+'</span></td><td style="padding:1rem  2.5rem 0 1rem">'+data[i].inf+'</td></tr></table></div></div>'
            $(".swiper-container1 .swiper-slide").eq(i).html(html)
            setHeight();//初始化高度特效属性
    }
    var swiper1 = new Swiper('.swiper-container1', {//初始化轮播插件
        onInit:function(){
            setPerHtml(0);//第一次进来加载第一条数据
        },
        onSlideChangeStart: function(swiper){//有效滑动执行
            $(".contWap,.bodyCont,.footBtnWap").removeClass("active")
            var index = swiper.activeIndex
            setPerHtml(index)
        }
    });
    
    $(document).on("click",".contWap",function(){
        $(this).toggleClass("active")
        $(this).find(".bodyCont").toggleClass("active");
        $(".footBtnWap").toggleClass("active")
    })
})