2019-12-27浮层和轮播

css经验积 image.png

累

冒泡的过程中添加时间处理函数

两种解决方法
1，在冒泡阶段切断

2，等一会执行
setTimeout()

image.png

冒泡阶段走完才会执行

image.png

下列代码修改了切换窗口时导致轮播图片乱序的bug

image.png

第二个需求，怎么让轮播倒放
想从1跳到3，不可以，必须一次状态切换跳到2，然后跳到3，除非计算下时间间隔
这个方案不适合，跳不了
最开始写的轮播适合

image.png

要推翻以前结论，目的是1可以无缝轮播，2，直接1跳到4

image.png

/////////////////////////////////////////////////
//31课无缝轮播第二集
let $buttons = $('#buttonWrapper>button')
let $sldes = $('slides')
let current = 0 //当前默认第0个
let $images = $slides.children('img')
let $firstCopy = $images.eq(0).clone(true)//true的意思是子元素也要克隆。不写就是只克隆自己 不包括里面的东西
//console.log($firstCopy[0].outerHTML)
let $lastCopy = $images.eq($images.length-1).clone(true)

$slides.append($firstCopy)
$slides.prepend($lastCopy)
//append.追加 prepend插前面
$slides.css({transform:'translateX(-400PX)'})

$buttons.eq(0).on('click', function(){
    if(current == 2){
        console.log('说明你是从最后一张到第一张')
        $slides.css({transform:'translateX(-1600px)'})
        //下列是数次修改后的写法，offset
            .one('transitionend', function(){
                $slides.hide()
                    .offset()//本来hide+show写法ok，但是浏览器会做一个合并：隐藏显示只显示
                    //offset() 如果想知道当前页面位置，必须算一遍，打断了浏览器的合并
                $slides.css({transform:'translateX(-400PX)'})
                .show()    
            })
    }else{
   
    //console.log(current)  要知道去哪一个，当点击第0个，把current打印出来，通过这一次动画，current才是0
    //第二步是把第一张复制到最后面，最后一张复制到最前
    $slides.css({transform:'translateX(-400px)'})
    current = 0
    }
})
$buttons.eq(1).on('click', function(){
    console.log(current)//变换之前的索引
    $slides.css({transform:'translateX(-800px)'})
    current = 1//变换之后
})
$buttons.eq(2).on('click', function(){
    if(current == 0){
       // console.log('说明你是从第一张到最后一张')
       $slides.css({transform:'translateX(0px)'})
        .one('transtionend', function(){
            $slides.hide()
                .offset()
            $sildes.css({transform:'translateX(-1200px)'})  
                .show()      
                
        })
    }else{
        $slides.css({transform:'translateX(-1200px)'})
        current = 2
    }
})
///////////////////////////////////////////////////////////////////////////
//优化封装后的写法
let $buttons = $('#buttonWrapper>button')
let $slides = $('#slides')
let $images = $slides.children('img')
let current = 0

makeFakeSlides()
$slides.css({transform:'translateX(-400px)'})
bindEvent()

function bindEvent(){
    $buttons.eq(0).on('click', function(){
        if(current == 2){
            $slides.css({transform:'translateX(-1600px)'})
                .one('transitionend', function(){
                    $slides.hide()
                        .offset()
                    $slides.css({transform:'translateX(-400px'})
                        .show()    
                })
        }else{
            $slides.css({transform:'translateX(-400px)'})
        }
        current = 0
    })
    $buttons.eq(1).on('click', function(){
        $slides.css({transform:'translateX(-800px)'})
        current = 1
    })
    $buttons.eq(2).on('click', function(){
        if(current == 0){
            $slide.css({transform:'translateX(0PX)'})
                .one('transitionend', function(){
                    $slides.hide()
                        .offset()
                    $slides.css({transform:'translateX(-1200px)'})
                        .show()    
                })
        }else{
            $slides.css({transform:'translateX(-1200px)'})
            current = 2
        }
    })
}
function makeFakeSlides(){
    let $firstCopy = $images.eq(0).clone(true)
    let $lastCopy = $images.eq($images.length-1).clone(true)

    $slides.append($firstCopy)
    $slides.prepend($lastCopy)
}