根据群里的群友需要。所以我用SuperSlide做了一个滚动图片。然后扩展了一下点击放大功能。有需要的收藏下吧。文件在群共享已经分享了
头部
<script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.SuperSlide.2.1.js"></script> <script type="text/javascript" src="jquery.galpop.min.js"></script> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td,img { padding: 0; margin: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,th,var,i { font-weight:normal; font-style:normal; } ol,ul,li { list-style: none; } div,dl,dt,dd,ol,ul,li{ zoom:1; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size:100%; } q:before,q:after { content:''; } abbr,acronym { border: 0; } /* 图片滚动 */ .picScroll{ position:relative; height:124px; padding: 10px 0 10px 42px; background:#fff; margin-bottom:10px; overflow:hidden; } .picScroll ul{ overflow:hidden; zoom:1; } .picScroll ul li{ float:left; margin: 0 6px; width:122px; overflow:hidden; display:inline; } .picScroll ul li img{ width:122px; height:124px; } .picScroll .prev, .picScroll .next{ position:absolute; left:10px; top: 60px; display:block; width:18px; height:28px; overflow:hidden; background:url(images/icons.png) -40px 0 no-repeat; cursor:pointer; } .picScroll .next{ left:auto; right:10px; background-position:-120px 0; } .picScroll .prevStop{ background-position:0 0; } .picScroll .nextStop{ background-position:-80px 0; } </style> <link type="text/css" rel="stylesheet" href="jquery.galpop.css" media="screen" />
body部分
<div style="width:740px; margin:0 auto; overflow:hidden;"> <!-- 图片滚动 S --> <div class="picScroll"> <ul> <li><a class="tplist" data-galpop-group="multiple" href="images/pro1.jpg"><img src="images/pro1.jpg" /></a></li> <li><a class="tplist" data-galpop-group="multiple" href="images/pro2.jpg"><img src="images/pro2.jpg" /></a></li> <li><a class="tplist" data-galpop-group="multiple" href="images/pro3.jpg"><img src="images/pro3.jpg" /></a></li> <li><a class="tplist" data-galpop-group="multiple" href="images/pro4.jpg"><img src="images/pro4.jpg" /></a></li> <li><a class="tplist" data-galpop-group="multiple" href="images/pro5.jpg"><img src="images/pro5.jpg" /></a></li> <li><a class="tplist" data-galpop-group="multiple" href="images/pic6.jpg"><img src="images/pic6.jpg" /></a></li> <li><a class="tplist" data-galpop-group="multiple" href="images/pic7.jpg"><img src="images/pic7.jpg" /></a></li> <li><a class="tplist" data-galpop-group="multiple" href="images/pic8.jpg"><img src="images/pic8.jpg" /></a></li> <li><a class="tplist" data-galpop-group="multiple" href="images/pic9.jpg"><img src="images/pic9.jpg" /></a></li> </ul> <a class="prev"></a> <a class="next"></a> </div> <script type="text/javascript">jQuery(".picScroll").slide({ mainCell:"ul",autoPlay:true,effect:"left", vis:5, scroll:2, autoPage:true, pnLoop:false });</script> <!-- 图片滚动 E --> </div> <script type="text/javascript"> $(document).ready(function() { $('.tplist').galpop(); }); </script>
吉公网安备 22020202000301号