无尽旋转木马

今天在逛论坛时，发现很多新人在问用jquery如何编写一个”旋转木马”的切图效果。所以自己特意去写了一个demo，希望能帮到一些新人。

思路：

1. 创建显示框DIV，设置overflow：hidden。
2. 在显示框中创建元素ul，将所有图片放在ul的li中，给元素li添加float：left。
3. 通过点击左右方向图标，改变显示框的scrollLeft。

 

如下图：

Jquery代码

为了以后能重复使用这代码，我将效果写成了一个插件。

插件的格式：

 

Js代码  

1. $.fn.infiniteCarousel=function() {   
2. return this.each(function()    
3. //要执行的代码   
4. });   
5. }  

$.fn.infiniteCarousel=function() {
return this.each(function() 
//要执行的代码
});
}

  调用插件：

 

Js代码  

1. $(function(){   
2. $(".infiniteCarousel").infiniteCarousel();   
3. });   
4. 注意：outerWidth=padding+width+border   
5. //一个图片所占的宽度   
6. singleWidth = $wrapperLis.filter(":first").outerWidth()   
7. 注意：innerWidth=padding+width   
8. //每页图片个数   
9. pageCount = Math.ceil($wrapper.innerWidth() / singleWidth)  

$(function(){
$(".infiniteCarousel").infiniteCarousel();
});
注意：outerWidth=padding+width+border
//一个图片所占的宽度
singleWidth = $wrapperLis.filter(":first").outerWidth()
注意：innerWidth=padding+width
//每页图片个数
pageCount = Math.ceil($wrapper.innerWidth() / singleWidth)

 无尽选择木马动画效果：

Js代码  

1. //判断是否还在执行动画中   
2. if($wrapper.is(':not(:animated)')){   
3. //执行动画效果   
4. $wrapper.animate({"scrollLeft":"+="+ scrolleft},200,function() {   
5.  currentPage = page;   
6. //在复制页第一页   
7. if(page == 0){   
8. $wrapper.scrollLeft(pageTotal*$wrapper.width());   
9. currentPage = pageTotal;   
10. //在复制页最后一页   
11. }else if(page > pageTotal){   
12. $wrapper.scrollLeft($wrapper.width());   
13. currentPage = 1;   
14. }   
15. });   
16. }  

//判断是否还在执行动画中
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;
}
});
}

 

代码下载地址： https://github.com/yeahzan/whirligig

 

博客地址： http://www.yeahzan.com/blog/item/42-2.html

 

转载于:https://www.cnblogs.com/shhaoran/archive/2013/02/02/2924541.html