也是用了很久的jQuery.

最近也在寫自己的那個小站。對於一些特效還是想弄清一原理。讓自己對一些東西有更深入的瞭解。

說說大圖輪播的原理：

1.很多時候使用方法Ul列表去展示。當然這也有一些好處，比如float對齊之類的。當然直接用p或者div也行。

2.瞭解overflow屬性。在溢位情況下的處理。其實輪播就是在不斷的處理li溢位的情況。

3 jQuery animate的動畫效果。當然如果不用這個也行。一個setInterval就能搞定它。不過jQuery還是做了一些封裝。

4 可能還需要一些基礎的理解就是對定位的熟悉。margin和postion的瞭解。

5 之後就是迴圈輪播了，迴圈輪播需要對節點進行重新的修改。

   具體而言就是在輪播到最後一張圖片的時候，修改節點，將第一個節點，新增到列表的最後一個位置。如下：

	$(this).css({'margin-left':0}).children('li').last().after($(this).children('li').first());

看一下核心程式碼：

html:

	<div class="list" id = "sidle">
		<ul>
			<li><img src="1.jpg" width="538" height="198" /></li>
			<li><img src="2.jpg" width="538" height="198" /></li>
			<li><img src="3.jpg" width="538" height="198" /></li>
			<li><img src="4.jpg" width="538" height="198" /></li>
		</ul>
	</div>
 

.list{
	width:538px;
	height:198px;
	overflow:hidden;
	margin:50px auto;
}
.list ul{
	width:2152px;
	height:198px;
	margin:0;
	padding:0;
}
.list ul li{
	float:left;
	width:538px;
}

	(function($){
		var silde = {
			init:function(){
				this.auto();
			},
			auto:function(){
				var _root = this,
					$ul = $("#sidle").find("ul"),
					$lis = $ul.children("li"),
					width = $lis.eq(0).width();
				setInterval(function(){
					$ul.animate({
							'margin-left':'-'+ width +'px'
						},
						'slow',
						function(){
							//此處保證能迴圈輪播
							//將已經輪播過的節點的第一張圖片新增到末尾的位置
							//再將margin-left重置為0px;
							//這樣就能一直的迴圈下去.
							$ul.css({'margin-left':0}).
								children('li').
								last().
								after(
									$ul.children('li').first()
								);
						});
					},2000
				);
			}
		};
		$(function(){silde.init();})
	})(jQuery);