JQuery實現圖片輪播(非滾動)

思想:函數

1,全部圖片使用絕對定位,定位在同一位置
spa

2,爲標籤添加點擊事件,當前元素添加class類on,其兄弟節點失去on類(外觀發生改變),當前顯示的圖片逐漸消失,經過索引顯示點擊對應的圖片。索引

3,自動調用shouAuto函數,該函數自動執行點擊事件,實現循環定時播放。事件

4,當鼠標懸停的時候中止調用自動播放函數圖片

主要點:class

1,$("xxx").fadeIn(1000);//淡入 fadeOut('slow');//淡出循環

2,siblings()//得到匹配集合中每一個元素的同胞(兄弟節點)方法

3,setInterval("showAuto()",4000);//會不停的調用函數,直到clearInterval()被調用或被窗口關閉。由setInterval()返回的id值能夠做爲clearInterval()方法的參數。im

4,三元表達式:n=n>=(count -1) ?0 : ++n;集合

相關文章
相關標籤/搜索