<!DOCTYPE html>
<html>
<head> 
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width'>
  <title>点击图片显示大图</title> 
  <script src='http://imcat.txjia.com/ximps/vendui/jquery/jquery-2.x.js'></script>
  <style>  
    #imgp1 img{padding:5px;width:100px;height:auto;cursor: pointer;}  
    #imgp2 img{padding:5px;width:auto;height:80px;cursor: pointer;}  


.pic1-play {
    width:320px; display:inline-block; 
}
.pic1-play ul, .pic1-play li{
    padding:0; margin:0;
}

.pic2-play {
    width:240px; display:inline-block; 
}
.pic2-play ul, .pic2-play li{
    padding:0; margin:0;
}

  </style> 

</head> 

<body> 


<!--
  $npics[] = 'http://imcat.txjia.com/ximps/static/media/collect/zuowen_shangxin.jpg';
  $npics[] = 'http://imcat.txjia.com/ximps/static/media/collect/y_col1.gif';
  $npics[] = 'http://imcat.txjia.com/ximps/static/media/collect/xgirl.jpg';
  $npics[] = 'http://imcat.txjia.com/ximps/static/media/collect/xditu.jpg';
  $npics[] = 'http://imcat.txjia.com/ximps/static/media/collect/xbomb.jpg';
  $npics[] = 'http://imcat.txjia.com/ximps/static/media/collect/xbbs_Pazz.gif';
  $npics[] = 'http://imcat.txjia.com/ximps/static/media/collect/wiki_02.gif';
  $npics[] = 'http://imcat.txjia.com/ximps/static/icons/basic/demo_nop300x200.jpg';
  $npics[] = 'http://imcat.txjia.com/ximps/static/icons/basic/demo_error.jpg';
-->


<script src='./picPlay.js'></script>

<div id="imgp1"> 
   <p class="abc">点击图片测试...</p> 
   <img src="http://imcat.txjia.com/ximps/static/media/collect/zuowen_shangxin.jpg" title="啊十大神兽的" /> 
   <img src="http://imcat.txjia.com/ximps/static/media/collect/y_col1.gif" /> 
   <img src="http://imcat.txjia.com/ximps/static/media/collect/xgirl.jpg" /> 
 </div>   

<div id="imgp2"> 
   <p class="abc">点击图片测试...</p> 
   <img src="http://imcat.txjia.com/ximps/static/media/collect/zuowen_shangxin.jpg" /> 
   <img src="http://imcat.txjia.com/ximps/static/media/collect/y_col1.gif" title="啊十大神兽的" /> 
   <img src="http://imcat.txjia.com/ximps/static/media/collect/xgirl.jpg" /> 
   <img src="http://imcat.txjia.com/ximps/static/media/collect/xbomb.jpg" /> 
   <img src="http://imcat.txjia.com/ximps/static/media/collect/xditu.jpg" title="啊十大神兽的" /> 
</div>   

img-btn, bg-pic, wh比例

<div class="pic1-play">
<div class="ppout">
  <ul class="ppin_box">

    <li> <a href="/news/2019/abcd.html" target="_blank">
      <img src="http://imcat.txjia.com/ximps/static/media/collect/zuowen_shangxin.jpg">
      <span>东莞市#￥￥正式启动</span>
    </a> </li>
    <li> <a href="/news/2019/abcd.html" target="_blank">
      <img src="http://imcat.txjia.com/ximps/static/media/collect/y_col1.gif">
      <span>东莞市v4.7贴心猫(imcat)</span>
    </a> </li>
  </ul>
</div>
</div>

<div class="pic2-play">
<div class="ppout">
  <ul class="ppin_box">
    <li> <a href="/news/2019/abcd.html" target="_blank">
      <img src="http://imcat.txjia.com/ximps/static/media/collect/zuowen_shangxin.jpg">
      <span>东莞市v4.7贴心猫(imcat)</span>
    </a> </li>
    <li> <a href="/news/2019/abcd.html" target="_blank">
      <img src="http://imcat.txjia.com/ximps/static/media/collect/y_col1.gif">
      <span>东莞市v4.6贴心猫(imcat)</span>
    </a> </li>
    <li> <a href="/news/2019/abcd.html" target="_blank">
      <img src="http://imcat.txjia.com/ximps/static/media/collect/xgirl.jpg">
      <span>东莞市#￥￥正式启动</span>
    </a> </li>
    <li> <a href="/news/2019/abcd.html" target="_blank">
      <img src="http://imcat.txjia.com/ximps/static/media/collect/xditu.jpg">
      <span>东莞市123正式启动</span>
    </a> </li>
  </ul>
</div>
</div>


</div>

<script>
  $('#imgp1').picView();
  $('#imgp2').picView();
  //$('.ppout').picView();
  $(".ppout").picPlay({li:'li',inbox:'ppin_box'});
</script> 


</body>
</html>
