.villagerInfo {
height: 5.0rem;
padding:0.5rem;
}
.villagerInfo ul li {
float: left;
width: 100%;
height: 100%;
}
/* 发布的内容及图片 */
.introduction {
margin: 0.75rem auto;
clear: both;
line-height: 1.8;
letter-spacing: 0.5px;
text-align: justify;
color: #999999;
font-size: 0.75rem;
}
.picItem {
height: 3.2rem;
}
.picItem a{
display:block;
width: 32%;
height: 100%;
float: left;
margin-left: 2%;
overflow:hidden;
}
.picItem a img{
width:100%;
}
.picItem a:nth-of-type(1) {
margin-left: 0;
}
<div class="villagerInfo">
<ul>
<li>
<p class="autoWidth introduction">感谢国家新农村建设的好政策。国家启动了新一轮的农村危房改造工程,重点改造有安全隐患的老房子。补贴对象是,五保户、低保户、贫困残疾户、建档立卡贫困户。根据已鉴定的安全等级进行补贴,最高补贴2万元。</p>
<div class="autoWidth picItem">
<a href="javascript:;" class="pica">
<img src="timg (3).jpg" alt="">
</a>
<a href="javascript:;" class="pica">
<img src="timg (2).jpg" alt="">
</a>
<a href="javascript:;" class="pica">
<img src="timg (1).jpg" alt="">
</a>
</div>
</li>
</ul>
</div>
$(function(){
$('.villagerInfo ul li').each(function(index,el){
var _this=$(this);
/*图片浏览器*/
var pict=_this.find('.picItem a');
pict.each(function(index,el){
var _t=$(this);
_t.on('click',function(){
// console.log(_t.index())
showBigImg(_t.index(),list)
})
})
})
/*制作一个假的图片数据*/
var list=[
{
image: "timg (3).jpg"
},
{
image: "timg (2).jpg"
},
{
image: "timg (1).jpg"
}
]
})
function showBigImg(index,list){
$.photoBrowser({
items: list,
initIndex: index, //当前点击的图片下标
onSlideChange: function(index) {
// console.log(this, index);
},
onOpen: function() {
// console.log("onOpen", this);
},
onClose: function() {
// console.log("onClose", this);
}
}).open();
}
使用jquery weui需引入jquery-weui.css,weui.min.css,jquery-weui.js和swiper.js这些插件