所属分类:网页特效-焦点图/幻灯片,图片特效
使用方法:
CSS样式
.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;}
引入jQuery库文件、插件JS文件
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jQuery-easing.js"></script>
<script type="text/javascript" src="js/jQuery-jcImgScroll.js"></script>
插件初始化、参数配置
$(function(){
//演示三 ID改变下试试
$("#demo3").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,
});
});
HTML结构
<div id="demo3" class="jcImgScroll">
<ul>
<li><a href="http://www.16sucai.com/" path="images/01.jpg"></a></li>
<li><a href="http://www.16sucai.com/" path="images/02.jpg"></a></li>
<li><a href="http://www.16sucai.com/" path="images/03.jpg"></a></li>
<li><a href="http://www.16sucai.com/" path="images/04.jpg"></a></li>
<li><a href="http://www.16sucai.com/" path="images/05.jpg"></a></li>
<li><a href="http://www.16sucai.com/" path="images/06.jpg"></a></li>
<li><a href="http://www.16sucai.com/" path="images/07.jpg"></a></li>
<li><a href="http://www.16sucai.com/" path="images/08.jpg"></a></li>
<li><a href="http://www.16sucai.com/" path="images/09.jpg"></a></li>
</ul>
</div>