手機是沒有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結束之后執(zhí)行
具體思維：
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結束之后
執(zhí)行一次*/
$(e.currentTarget).addClass('right').css({transform:'none'}) /*等動畫執(zhí)行完后昏翰，去掉原來的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結束之后
執(zhí)行一次*/
$(e.currentTarget).addClass('right').css({transform:'none'}) /*等動畫執(zhí)行完后苍匆，去掉原來的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結束之后
執(zhí)行一次*/
$(e.currentTarget).addClass('right').css({transform:'none'}) /*等動畫執(zhí)行完后，去掉原來的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結束之后
執(zhí)行一次*/
$(e.currentTarget).addClass('right').css({transform:'none'}) /*等動畫執(zhí)行完后棚菊，去掉原來的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的輪播
發(fā)現BUG：當切到其他頁面的時候统求，等一會兒检碗，再切回來，會發(fā)現輪播亂了
加一段代碼
<script>
setInterval(function(){
console.log(new Date())
},500)
</script>
每1S鐘打印2次码邻，再做下試驗：切到其他頁面的時候折剃，等一會兒，再切回來
剛開始還正常像屋，每個時間重復2次怕犁，后面就變成一個時間重復一次（有問題）
當你不看頁面的時候，然后再看己莺，瀏覽器是把好幾次的狀態(tài)切換一起做奏甫，所以導致了問題
其他是如何解決的？用戶在不看輪播頁面的時候凌受，讓輪播停掉（機智）
google搜 page visible
監(jiān)聽事件：
document.addEventListener('visibilitychange',function(e){
console.log(document.hidden)
})
當頁面切走之后阵子，打印的是true，當頁面切回來胜蛉，打印的是false
那么就好辦款筑，當為true時智蝠，把且狀態(tài)的鬧鐘干掉，當為false時奈梳，再恢復鬧鐘
這種輪播有沒有待優(yōu)化的呢杈湾？有，其不足之處是不能直接從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許可都挺好
