手机是没有hover的
需求:点击之后出现二级菜单(以前是通过鼠标hover进去出现的),点别的地方又消失
无缝轮播类似于集体跳绳
jquery-3.2.1.min.js
img[src="./slides-photo/$.jpg"][width=400][height=300]*3
tab后显示
把所有margin去掉,把所有padding去掉
box-sizing: border-box;
border-box宽度是包含border的
用js精确显示哪一张显示,哪一张不显示
让图片相互独立,所以原来的css不行
让大家都做绝对定位
transitionend意思是等动画transition结束之后执行
具体思维:
setTimeout(function(){
$('.images>img:nth-child(1)').css({
transform: 'translateX(-100%)'
})
$('.images>img:nth-child(2)').css({
transform: 'translateX(-100%)'
})
$('.images>img:nth-child(1)').one('transitionend',function(e){ /* transitionend意思是等动画transition结束之后
执行一次*/
$(e.currentTarget).addClass('right').css({transform:'none'}) /*等动画执行完后,去掉原来的transform
移到窗口的右边 */
})
},3000)
setTimeout(function(){
$('.images>img:nth-child(2)').css({
transform: 'translateX(-200%)'
})
$('.images>img:nth-child(3)').css({
transform: 'translateX(-100%)'
})
$('.images>img:nth-child(2)').one('transitionend',function(e){ /* transitionend意思是等动画transition结束之后
执行一次*/
$(e.currentTarget).addClass('right').css({transform:'none'}) /*等动画执行完后,去掉原来的transform
移到窗口的右边 */
})
},6000)
setTimeout(function(){
$('.images>img:nth-child(3)').css({
transform: 'translateX(-200%)'
})
$('.images>img:nth-child(1)').css({
transform: 'translateX(-100%)'
})
$('.images>img:nth-child(3)').one('transitionend',function(e){ /* transitionend意思是等动画transition结束之后
执行一次*/
$(e.currentTarget).addClass('right').css({transform:'none'}) /*等动画执行完后,去掉原来的transform
移到窗口的右边 */
})
},9000)
setTimeout(function(){
$('.images>img:nth-child(1)').css({
transform: 'translateX(-200%)'
})
$('.images>img:nth-child(2)').css({
transform: 'translateX(-100%)'
})
$('.images>img:nth-child(1)').one('transitionend',function(e){ /* transitionend意思是等动画transition结束之后
执行一次*/
$(e.currentTarget).addClass('right').css({transform:'none'}) /*等动画执行完后,去掉原来的transform
移到窗口的右边 */
})
},12000)
*{
margin:0;
padding:0;
}
*{
box-sizing: border-box;
}
.window{
width: 400px;
height: 300px;
margin: 20px auto;
overflow: hidden;/让多余的看不见/
}
.images{
/* display: flex; */
position: relative;
}
.images > img{
width:100%;
transition: all 0.3s;
}
.images > img:nth-child(1){
position: absolute;
top:0;
left:0;
}
.images > img:nth-child(2){
position: absolute;
top:0;
left:100%;
}
.images > img:nth-child(3){
position: absolute;
top:0;
left:100%;
}
.images > img.right{
position: absolute;
top:0;
left:100%;
}
注意这个符号`
${n} 表示n为几,则${n}显示为常数几
jquery remove class
代码可以升级,使得可以3 2 1的轮播
发现BUG:当切到其他页面的时候,等一会儿,再切回来,会发现轮播乱了
加一段代码
<script>
setInterval(function(){
console.log(new Date())
},500)
</script>
每1S钟打印2次,再做下试验:切到其他页面的时候,等一会儿,再切回来
刚开始还正常,每个时间重复2次,后面就变成一个时间重复一次(有问题)
当你不看页面的时候,然后再看,浏览器是把好几次的状态切换一起做,所以导致了问题
其他是如何解决的?用户在不看轮播页面的时候,让轮播停掉(机智)
google搜 page visible
监听事件:
document.addEventListener('visibilitychange',function(e){
console.log(document.hidden)
})
当页面切走之后,打印的是true,当页面切回来,打印的是false
那么就好办,当为true时,把且状态的闹钟干掉,当为false时,再恢复闹钟
这种轮播有没有待优化的呢?有,其不足之处是不能直接从1点击到3,所以呢,需要再换一种思路做
把1 2 3作为一个整体来移动,同时在3后面再加一个1,就可以满足要求了
把1复制1份放到3后面
3到1再到1(左边的)——既方便切换,又能做无缝
原理就是克隆最后一张和第一张图片,然后分别放在最前面和最后面
.eq(0)
.clone(true) 克隆 true表示子元素也克隆
把图片打印出来,如下:
.append
.prepend
这个时候,复制的3在当前窗口,所以要挪位置,让1在当前窗口
当点击3之后,再点击1(无缝播),是个假的1,然后马上再跳到真的1(让用户看不见)
也不能让用户看穿
关于版权问题,搜 阮一峰 lisence
BSD许可和MIT许可都挺好