今天在逛论坛时，发现很多新人在问用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;}});}
发表回复