2018-01-10 用jQuery做无缝轮播

手机是没有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不行

image.png

让大家都做绝对定位

transitionend意思是等动画transition结束之后执行

image.png

具体思维：
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%;
}