<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery堆叠图片左右切换轮播图插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.blank30{height:30px;overflow:hidden;}
/* jQuery jcImgScroll */
.jcImgScroll{position:relative;height:380px;margin:40px auto 0 auto;}
.jcImgScroll li{border:1px solid #ccc;}
.jcImgScroll li a{background:#fff;display:block;position:relative;z-index:99;}
.jcImgScroll li.loading a{background:#fff url(img/loading.gif) no-repeat center center;}
.jcImgScroll li img,.jcImgScroll li,.jcImgScroll em,.jcImgScroll dl{display:none;border:0 none;}
.jcImgScroll li img{width: 100%;height: 100%;}
.jcImgScroll em.sPrev{background:url(images/arrow-left.png) no-repeat left center;}
.jcImgScroll em.sNext{background:url(images/arrow-right.png) no-repeat right center;}
.jcImgScroll dl dd{background:url(images/NumBtn.png) no-repeat 0 bottom;text-indent:-9em;}
.jcImgScroll dl dd:hover,.jcImgScroll dl dd.curr{background-position:0 0;}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>jquery堆叠图片左右切换轮播图插件</h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div id="demo" class="jcImgScroll">
<ul>
<li><a href="#" path="images/01.jpg"></a></li>
<li><a href="#" path="images/02.jpg"></a></li>
<li><a href="#" path="images/03.jpg"></a></li>
<li><a href="#" path="images/04.jpg"></a></li>
<li><a href="#" path="images/05.jpg"></a></li>
<li><a href="#" path="images/06.jpg"></a></li>
<li><a href="#" path="images/07.jpg"></a></li>
<li><a href="#" path="images/08.jpg"></a></li>
<li><a href="#" path="images/09.jpg"></a></li>
</ul>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jQuery-easing.js"></script>
<script type="text/javascript" src="js/jQuery-jcImgScroll.js"></script>
<script type="text/javascript">
$(function(){
$("#demo").jcImgScroll({
arrow : {
width:45,
height:400,
x:60,
y:0
},
width : 330, //设置图片宽度
height:469, //设置图片高度
imgtop:22,//每张图片的上下偏移量
imgleft:-10,//每张图片的左边偏移量
imgwidth:30,//每张图片的宽度偏移量
imgheight:44,//每张图片的高度偏移量
count : 9,
offsetX : 60,
NumBtn : false,
title:false,
setZoom:.8,
});
});
</script>
</body>
</html>
jQuery堆叠图片左右切换轮播图特效源码.zip
版权申诉
117 浏览量
2022-11-06
23:59:28
上传
评论
收藏 314KB ZIP 举报
jQuery堆叠图片左右切换轮播图特效源码.zip （23个子文件） 
132689879676081910 jquery_ddzy css 
htmleaf-demo.css 6KB normalize.css 2KB images 
01.jpg 29KB 05.jpg 57KB 07.jpg 17KB 04.jpg 65KB
NumBtn.png 4KB 08.jpg 20KB arrow-right.png 2KB 03.jpg 19KB 06.jpg 17KB 02.jpg 23KB arrow-left.png 2KB 09.jpg 21KB
loading.gif 4KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 3KB js jquery-1.11.0.min.js 94KB jQuery-jcImgScroll.js 10KB jQuery-easing.js 5KB资源评论
