新、旧轮播图
2018-11-09 本文已影响0人
猫晓封浪
旧版思路:
使用排队思维实现,即多人跳大绳思维,当前第一张离开后,立即进入轮播区的等进入区域
注:图片的宽和高很重要,最好写在标签内
- 使用 jQuery 获取到的伪数组使用时,
v[i]
是DOM
对象,需要对其进行封装为 jQuery 对象,即$(v[i])
或者v.eq(i)
- jQuery获取当前索引方法:
$().index()
- jQuery中
x.trigger('动作名不加on')
自动触发事件 - jQuery的链式操作(因为jQuery源码中都有:
return this
):
v.eq(i).trigger('动作名不加on')
.addClass('类名') //给v.eq(i)加类名
.silibings('.类名').removeClass('类名') //找到它的所有兄弟(**必须加点**)
新版本轮播
即实现无缝轮播,又能实现跳转
思路:
在点击最后一张,再去点击第一张时,用户先看到假的第一张,在看到真的第一张,即假的出现时,立即替换为真的(利用用户的错觉),从第一张到第三张同理。简单理解:在第一张前放一个假的最后一张;在最后一张后放置假的第一张并且使用位移实现
替换过程:
$(`.window>img:nth-child(${xn(x)})`).removeClass('current').addClass('leave')
.one('transitionend',function (x) {
$(x.currentTarget).removeClass('leave').addClass('enter')
});
$(`.window>img:nth-child(${yn(y)})`).removeClass('enter').addClass('current');
其中 xn(x)
, yn(y)
是分别按照1,2,3,1,2,3和2,3,1,2,3,1出数,通过设置定时器可实现自动轮播
function xn(x) {
if (x>3){
x=x%3;
if (x===0){
x=3
}
}
return x
}
function yn(y) {
if (y>3){
y=y%3;
if (y===0){
y=3
}
}
return y
}
bug
由于 setInterval()
,当不在当前轮播页面时,计时器会运转,但是图片不会滚动,再次打开此页面时,会出现混乱的状态
解决方案:给当前页面添加 visibilitychange
监听事件
document.addEventListener('visibilitychange',function(){
if (document.hidden){
window.clearInterval(timeId)
}else{
timeId=setInterval(function () {},1000);
}
})
其中 document.hidden
不在当前页面时为 true ,反则为 false