工具材料:編輯器、瀏覽器、jQuery
1，實施的總體思路:
第壹部分是初始化:隱藏除第壹張輪播圖片外的所有意外圖片，隱藏前進和後退按鈕，從而激活第壹個索引按鈕。
2、具體事件處理思路的實現:
事件部分:通過jquery的hover()綁定鼠標掛機離開時的事件處理，通過jquery的bind()方法綁定鼠標點擊事件處理，控制前後翻轉和輪播:pre()，next()，play()，start()啟動自動輪播，stop()停止自動輪播。
3.壹個簡單的代碼示例如下:
& lt！DOCTYPE？html & gt？
& lthtml & gt？
& lthead & gt？
& ltmeta？charset="UTF-8 " >？
& lttitle & gtJquery輪播效果圖？& lt/title & gt；？
& lt劇本？type="text/javascript "？src = " scripts/jquery-1 . 9 . 1 . js " >& lt/script & gt；？
& lt風格？type="text/css " >？
*?{?
填充:？0px？
邊距:？0px？
}?
答？{?
文字-裝飾:？無；？
}?
ul？{?
列表樣式:？外面？沒有嗎？無；？
}?
。滑塊，？。滑動面板？img，？。滑塊-額外？{?
寬度:？650px？
身高:？413px；？
}?
。滑塊？{?
文本對齊:？居中；？
邊距:？30px？自動；？
位置:？相對的；？
}?
。滑動面板？。滑塊-導航，？。滑塊-前置，？。滑塊-下壹個？{?
位置:？絕對；？
z指數:？8;？
}?
。滑動面板？{?
位置:？絕對；？
}?
。滑動面板？img？{?
邊框:？無；？
}?
。滑塊-額外？{?
位置:？相對的；？
}?
。滑動導航？{?
左邊距:？-51px；？
位置:？絕對；？
左:？50%;？
底部:？4px？
}?
。滑動導航？李？{?
背景:？# 3e3e3e？
邊框半徑:？50%;？
顏色:？# fff？
光標:？指針；？
邊距:？0?2px？
溢出:？隱藏；？
文本對齊:？居中；？
顯示:？內嵌塊；？
身高:？18px；？
行高:？18px；？
寬度:？18px；？
}?
。滑動導航？。滑塊-項目-已選擇？{?
背景:？藍色；？
}?
。滑動頁面？壹個{？
背景:？rgba(0，？0,?0,?0.2);？
濾鏡:？progid:DXImageTransform。Microsoft . gradient(startColorstr = # 33000000，endColorstr = # 33000000)；？
顏色:？# fff？
文本對齊:？居中；？
顯示:？屏蔽；？
字體系列:？《西姆孫》；？
字體大小:？22px？
寬度:？28px？
身高:？62px？
行高:？62px？
頁邊距-頂部:？-31px；？
位置:？絕對；？
top:？50%;？
}?
。滑動頁面？答:懸停？{?
背景:？rgba(0，？0,?0,?0.4);？
濾鏡:？progid:DXImageTransform。Microsoft . gradient(startColorstr = # 66000000，endColorstr = # 66000000)；？
}?
。滑塊-下壹個？{?
左:？100%;？
左邊距:？-28px；？
}?
& lt/style & gt；？
& lt劇本？type = " text/JavaScript " & gt；？
$(文檔)。ready(函數()？{?
var？長度，？
currentIndex？=?0,?
區間，？
已經開始了？=?假的，？//旋轉木馬開始了嗎？
t？=?3000;？//輪播間隔？
長度？=?$('.滑塊-面板)。長度；？
//除了第壹張圖片，其他都隱藏？
$('.滑塊面板:not(:first)')。hide()；？
//激活第壹個滑塊項目？
$('.slider-item:first’)。add class(“slider-item-selected”)；？
//隱藏前進和後退按鈕？
$('.滑塊-頁面)。hide()；？
//鼠標懸停時，顯示前進後退按鈕停止滑動；鼠標離開時隱藏前進後退按鈕開始滑動？
$('.滑動面板？。滑塊-前置，？。滑塊-下壹個’)。hover(函數()？{?
stop()；？
$('.滑塊-頁面)。show()；？
},?函數()？{?
$('.滑塊-頁面)。hide()；？
start()；？
});？
$('.滑塊-項目’)。懸停(函數(e)？{?
stop()；？
var？preIndex？=?$(".滑塊-項目”)。過濾器("。滑塊-項目-選定”)。index()；？
currentIndex？=?$(這個)。index()；？
播放(preIndex，？current index)；？
},?函數()？{?
start()；？
});？
$('.滑塊-前’)。取消綁定(“單擊”)；？
$('.滑塊-前’)。bind('點擊'，？函數()？{?
pre()；？
});？
$('.滑塊-下壹個’)。取消綁定(“單擊”)；？
$('.滑塊-下壹個’)。bind('點擊'，？函數()？{?
next()；？
});？
/**?
*?向前翻頁？
*/
功能？pre()？{?
var？preIndex？=?currentIndex？
currentIndex？=?(- currentIndex？+?長度)？%?長度；？
播放(preIndex，？current index)；？
}?
/**?
*?把這壹頁翻回來？
*/
功能？下壹個()？{?
var？preIndex？=?currentIndex？
currentIndex？=?++currentIndex？%?長度；？
播放(preIndex，？current index)；？
}?
/**?
*?從preIndex頁面轉到currentIndex頁面？
*?preIndex？整數，翻頁的起始頁？
*?currentIndex？整數，妳翻到哪壹頁了？
*/
功能？播放(preIndex，？currentIndex)？{?
$('.滑塊-面板)。eq(preIndex)。淡出(500)？
。父級()。孩子()。eq(當前索引)。fade in(1000)；？
$('.滑塊-項目’)。remove class(' slider-item-selected ')；？
$('.滑塊-項目’)。eq(當前索引)。add class(“slider-item-selected”)；？
}?
/**?
*?開始旋轉木馬？
*/
功能？start()？{?
如果(！hasStarted)？{?
已經開始了？=?真實；？
區間？=?setInterval(下壹個，？t)；？
}?
}?
/**?
*?停止旋轉木馬？
*/
功能？stop()？{?
clearInterval(區間)；？
已經開始了？=?假的；？
}?
//啟動旋轉木馬？
start()；？
});？
& lt/script & gt；？
& lt/head & gt；？
& ltbody & gt？
& ltdiv？class="slider " >？
& ltul？class="slider-main " >？
& lt李？class="slider-panel " >？
& lt答？href= "
Title= "圖片1 "？src = " images/1 . jpg " & gt；& lt/a & gt；？
& lt/李& gt？
& lt李？class="slider-panel " >？
& lt答？href = " # " & gt& ltimg？Title= "圖片2 "？src = " images/1 . jpg " & gt；& lt/a & gt；？
& lt/李& gt？
& lt李？class="slider-panel " >？
& lt答？href = " # " & gt& ltimg？Title= "圖片3 "？src = " images/1 . jpg " & gt；& lt/a & gt；？
& lt/李& gt？
& lt李？class="slider-panel " >？
& lt答？href = " # " & gt& ltimg？Title= "圖片4 "？src = " images/1 . jpg " & gt；& lt/a & gt；？
& lt/李& gt？
& lt/ul & gt；？
& ltdiv？class="slider-extra " >？
& ltul？class="slider-nav " >？
& lt李？class="slider-item " >1 & lt；/李& gt？
& lt李？class="slider-item " >2 & lt/李& gt？
& lt李？class="slider-item " >3 & lt/李& gt？
& lt李？class="slider-item " >4 & lt/李& gt？
& lt/ul & gt；？
& ltdiv？class="slider-page " >？
& lt答？class="slider-pre "？href = " JavaScript:；;"& gt& lt& lt/a & gt；？
& lt答？class="slider-next "？href = " JavaScript:；;"& gt& gt& lt/a & gt；？
& lt/div & gt；？
& lt/div & gt；？
& lt/div & gt；？
& lt/body & gt；？
& lt/html & gt；