有bug的
bug體現在，刷新頁面的時候，第一次按左按鈕，第2張圖片會出現3次，我一直以為是js的哪里寫錯了，但是通過對比，糾錯，始終找不到bug產生的原因，突然想到，如果js沒有寫錯，那就是css寫的不對，于是更改了css
無bug
緩存節點信息，保存圖片寬度和圖片數量
var $ct = $('#carousel'),
$imgs = $('#ct>img'),
$pre = $('#pre'),
$next = $('#next'),
$bullet = $('#bullet'),
imgWidth = $imgs.width(),
imgCount = $imgs.length
設置頁面初始顯示的圖片是第一張,設置播放鎖，從第下標為0的第一張圖片開始播放
var pageIndex = 0
var isAnimate = false
play(0)
播放的方法
function play (idx) {
if (isAnimate) return
isAnimate = true
$imgs.eq(pageIndex).fadeOut(500)
$imgs.eq(idx).fadeIn(500, function () {
isAnimate = false
})
pageIndex = idx
setBullet()
}
左右按鈕的播放方法
function playNext () {
play((pageIndex + 1) % imgCount)
}
function playPre () {
play((imgCount + pageIndex - 1) % imgCount)
}
調用左右按鈕的方法,以及設置小圓點點擊時，找到對應的下標，然后顯示對應下標的圖片
$next.click(function () {
playNext()
})
$pre.click(function () {
playPre()
})
$bullet.find('span').on('click', function () {
var idx = $(this).index()
play(idx)
})
當小圓點移動時，添加class，之前的index移除class。設置自動播放以及當鼠標放在ct的頁面里時，清除定時器，調用自動播放。當進入頁面時，頁面就會自動播放
function setBullet () {
$bullet.children().removeClass('active')
.eq(pageIndex).addClass('active')
}
function autoPlay () {
clock = setInterval(function () {
playNext()
}, 3000)
}
$ct.mouseenter(function () {
clearInterval(clock)
}).mouseleave(function () {
autoPlay()
})
autoPlay()
總結:
通過輪播的2種方式，學到了在css中，不同的輪播實現方法，對應相同的頁面顯示邏輯，體現出對相對定位和絕對定位的運用，z-index使用
js部分就是，學會運用false 和 true 設定動畫鎖，css用js來添加，移除樣式
