今天在逛论坛时,发现很多新人在问用jquery如何编写一个”旋转木马”的切图效果。所以自己特意去写了一个demo,希望能帮到一些新人。
思路:
- 创建显示框DIV,设置overflow:hidden。
- 在显示框中创建元素ul,将所有图片放在ul的li中,给元素li添加float:left。
- 通过点击左右方向图标,改变显示框的scrollLeft。
如下图:
Jquery代码
为了以后能重复使用这代码,我将效果写成了一个插件。
插件的格式:
$.fn.infiniteCarousel=function() { return this.each(function() //要执行的代码 }); }调用插件:
$(function(){ $(".infiniteCarousel").infiniteCarousel(); }); 注意:outerWidth=padding+width+border //一个图片所占的宽度 singleWidth = $wrapperLis.filter(":first").outerWidth() 注意:innerWidth=padding+width //每页图片个数 pageCount = Math.ceil($wrapper.innerWidth() / singleWidth)无尽选择木马动画效果:
//判断是否还在执行动画中 if($wrapper.is(':not(:animated)')){ //执行动画效果 $wrapper.animate({"scrollLeft":"+="+ scrolleft},200,function() { currentPage = page; //在复制页第一页 if(page == 0){ $wrapper.scrollLeft(pageTotal*$wrapper.width()); currentPage = pageTotal; //在复制页最后一页 }else if(page > pageTotal){ $wrapper.scrollLeft($wrapper.width()); currentPage = 1; } }); }