logo

哈达波斯网|专注网站

脚本

jq滚动图片和点击放大带按钮

脚本  2018/4/19 9:27:22  管理员  

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


网站首页  | 最新公告  | 漏洞修补  | 网站模板  | 知识文档  | 与我联系
Copyright © 2015 jlasp.com All Rights Reserved.
哈达波斯网|专注网站 版权所有
地址:吉林省吉林市昌邑区 联系QQ:383612004 联系人:董先生
未经本站授权,禁止复制或建立镜像,内容仅用于学习参考!
ICP备案号:吉ICP备15000891号-1 | 

吉公网安备 22020202000301号