手机端图文查看器
应需求人员要求,制作一款手机端的图文轮播查看器,要求达到“今日头条”,“凤凰网”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") }) })
追求原创特效