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

来源:https://www.sucaihuo.com/js/116.html 2015-05-13 08:56浏览(2058) 收藏

jQuery图片层叠加效果,左右按钮可切换大图,还支持索引按钮控制图片切换。
jQuery仿唯品会平滑旋转图片叠加切换效果
分类:图片代码 > 图片滑动 难易:中级
登录后点击“下载资源”按钮,复制链接,邀请好友免费下载
查看演示 下载资源: 221 下载资源 下载积分: 20 积分

HTML

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

<div id="scrolls" class="jcImgScroll">
    <ul>
        <li><a href="http://www.sucaihuo.com/" path="images/01.jpg"></a></li>
        <li><a href="http://www.sucaihuo.com/" path="images/02.jpg"></a></li>
        <li><a href="http://www.sucaihuo.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, });

评论2
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

  • 头像 椅子
    06-06 15:45
    哎***槽
  • 头像 沙发
    05-18 09:02
    a***o
    效果挺赞
1 2