JS 基础 - DOM 事件

frontEnd
  1. 如何做「点击其他地方关闭浮层」

· 方案1：http://js.jirengu.com/lagiyocuzu/1/edit?html,js,output

· 方案2：http://js.jirengu.com/lagiyocuzu/2/edit?html,js,output

· BUG1：http://js.jirengu.com/lagiyocuzu/3/edit 点击后没有反应

· BUG2：http://js.jirengu.com/lagiyocuzu/4/edit 点击后没有反应

· 理解 DOM 事件：http://js.jirengu.com/zayipuvafo/1/edit?html,js,output

  1. 继续轮播吧
    最终代码：https://github.com/FrankFang/slides-demo-2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <title>无缝的轮播</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <div class="container">
    <div class="window">
      <div id="slides" class="images">
        <img src="./1.png" alt="图片" width="400" height="300">
        <img src="./2.png" alt="图片" width="400" height="300">
        <img src="./3.png" alt="图片" width="400" height="300">
        <img src="./4.png" alt="图片" width="400" height="300">
      </div>
    </div>
    <div id="controls" style="text-align:center;">
      <button id="previous">上一张</button>
      <button id="next">下一张</button>
    </div>
    <div id=buttonWrapper style="text-align:center;">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
    </div>
  </div>
  
  <script src="./jquery-3.2.1.min.js"></script>
  <script src="./main.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
let $buttons = $('#buttonWrapper>button')
let $slides = $('#slides')
let $images = $slides.children('img')
let current = 0

makeFakeSlides()
$slides.css({transform:'translateX(-400px)'})
bindEvents()
$(next).on('click', function(){
  goToSlide(current+1)
})
$(previous).on('click', function(){
  goToSlide(current-1)
})

let timer = setInterval(function(){
  goToSlide(current+1)
},2000)
$('.container').on('mouseenter', function(){
  window.clearInterval(timer)
}).on('mouseleave', function(){
  timer = setInterval(function(){
    goToSlide(current+1)
  },2000)
})

function bindEvents(){
  $('#buttonWrapper').on('click', 'button', function(e){
    let $button = $(e.currentTarget) 
    let index = $button.index()
    goToSlide(index)
  })
}

//重要
function goToSlide(index){
  if(index > $buttons.length-1){
    index = 0
  }else if(index <0){
    index = $buttons.length - 1
  }
  console.log('current', 'index')
  console.log(current, index)
  if(current === $buttons.length -1 && index === 0){
    // 最后一张到第一张
    console.log('here')
    $slides.css({transform:`translateX(${-($buttons.length + 1) * 400}px)`})
      .one('transitionend', function(){
        $slides.hide()
        $slides.offset() // .offset() 可触发 re-layout，这是一个高级技术，删掉这行会发现 bug，只能加上
        // 注释掉上面一行看最后一张到第一张的动画，就知道为什么要加 offset() 了。
        $slides.css({transform:`translateX(${-(index+1)*400}px)`}).show()
      })

  }else if(current === 0 && index === $buttons.length - 1){
    // 第一张到最后一张
    $slides.css({transform:`translateX(0px)`})
      .one('transitionend', function(){
        $slides.hide().offset()
        $slides.css({transform:`translateX(${-(index+1)*400}px)`}).show()
      })

  }else{
    $slides.css({transform:`translateX(${- (index+1) * 400}px)`})
  }
  current = index
}

function makeFakeSlides(){
  let $firstCopy = $images.eq(0).clone(true)
  let $lastCopy = $images.eq($images.length-1).clone(true)

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