轮播图（jQuery）

轮播资源站：Getting Started With Swiper

注意：
（内容HTML）/（样式CSS）/（行为JS） 分离
（CSS加到head里，JS加到html里）

面试问道：怎样看待（内容HTML）/（样式CSS）/（行为JS） 分离？
回答模式：从反面回答（如果不。。。。）

display:flex;（按一行排列）
align-items:flex-start;（按行排列后不拉伸变形）
overflow:hidden;（超出部分不显示）

一、简单的例子

HTML





  
  
  



  

    

      
      
      
      
    
  
  
    第1张
    第2张
    第3张
    第4张
  

CSS
.red{
    color: red;
}

• JS轮播代码

var allButtons = $('#buttons > span')

for (let i = 0; i < allButtons.length; i++) {
  $(allButtons[i]).on('click', function(x) {
    console.log('hi')
    var index = $(x.currentTarget).index()
    var p = index * -300
    $('#images').css({
      transform: 'translate(' + p + 'px)'
    })
    n = index
    allButtons.eq(n)
      .addClass('red')
      .siblings('.red').removeClass('red')
  })
}



var n = 0;
var size = allButtons.length
allButtons.eq(n % size).trigger('click')
  .addClass('red')
  .siblings('.red').removeClass('red')

var timerId = setInterval(() => {
  n += 1
  allButtons.eq(n % size).trigger('click')
    .addClass('red')
    .siblings('.red').removeClass('red')
}, 1000)

$('.window').on('mouseenter', function() {
  window.clearInterval(timerId)
})

$('.window').on('mouseleave', function() {
  timerId = setInterval(() => {
    n += 1
    allButtons.eq(n % size).trigger('click')
      .addClass('red')
      .siblings('.red').removeClass('red')
  }, 3000)
})

• 优化后

JS
var allButtons = $('#buttons > span') //伪数组

for (let i = 0; i < allButtons.length; i++) {
  $(allButtons[i]).on('click', function(x) {
    var index = $(x.currentTarget).index() //取到点击按钮排行第几
    var p = index * -300
    $('#images').css({
      transform: 'translate(' + p + 'px)'
    })
    n = index
    activeButton(allButtons.eq(n))
  })
}



var n = 0;
var size = allButtons.length
// eq()会找出对应的DOM，然后封装成jquery，使其能够使用jquery的方法，(n % size)表示一轮循环  
allButtons.eq(n % size).trigger('click') // trigger帮你触发‘click’事件


var timerId = setTimer()

function setTimer() {
  return setInterval(() => {
    n += 1
    allButtons.eq(n % size).trigger('click')
  }, 3000)
}

function activeButton($button) {
  $button
    .addClass('red')
    .siblings('.red').removeClass('red')
}

$('.window').on('mouseenter', function() {
  window.clearInterval(timerId)
})

$('.window').on('mouseleave', function() {
  timerId = setTimer()
})