素材牛VIP会员

唯品会授权书展示幻灯片jQuery特效

 所属分类:网页特效-焦点图/幻灯片,图片特效

 浏览:1790次  评论:0次  更新时间:2016-10-11
牛币素材VIP可免积分下载
唯品会授权书展示幻灯片jQuery特效兼容IE8
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:出自唯品会的一款带左右箭头的平滑旋转图片叠加切换代码特效

详细介绍

使用方法:

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>

相关素材 - 焦点图/幻灯片,图片特效

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)