根据群里的群友需要。所以我用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号