jQuery仿唯品会平滑旋转图片叠加切换效果

收藏

jQuery图片层叠加效果，左右按钮可切换大图，还支持索引按钮控制图片切换。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们在滚动区域#scrolls放置多个图片：

<div id="scrolls" class="jcImgScroll">
    <ul>
        <li><a href="http://www.erdangjiade.com/" path="images/01.jpg"></a></li>
        <li><a href="http://www.erdangjiade.com/" path="images/02.jpg"></a></li>
        <li><a href="http://www.erdangjiade.com/" path="images/03.jpg"></a></li>
       ......
    </ul>
</div>

接着我们引入jQuery库、jQuery-easing.js动画及jQuery-jcImgScroll.js插件：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="js/jQuery-easing.js"></script>
<script type="text/javascript" src="js/jQuery-jcImgScroll.js"></script>

jQuery

$("#scrolls").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, });