有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来添加,移除样式
网友评论