移动端类似于微信朋友圈的图片浏览器

.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这些插件