無縫輪播

東方來客發表於2018-07-18

本著內容 樣式 行為分離的原則來一手無縫輪播.

<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<title>無縫輪播</title>
</head>
<body>
  <div class="window">
    <div class="images">
      <img src="https://user-gold-cdn.xitu.io/2018/7/18/164abd3d84d904c0?w=750&h=498&f=jpeg&s=97651" alt="p1"  width=300px id="img1">
      <img src="https://user-gold-cdn.xitu.io/2018/7/18/164abd3d849004bd?w=750&h=497&f=jpeg&s=60368" alt="p2"  width=300px id="img2">
      <img src="https://user-gold-cdn.xitu.io/2018/7/18/164abd3d84528469?w=750&h=499&f=jpeg&s=80564" alt="p3"  width=300px id="img3">
    </div>
  </div>
  <script src="./main.js"></script>
</body>
</html>
複製程式碼

做這個無縫輪播的思路就像是跳大繩,大家排好隊,一次上去一個人跳,跳完之後再跑到後面去排隊. 這裡為輪播設想了三個狀態, 預設的 current 正在顯示狀態,顯示完畢向左運動的 leave 狀態,而後從左側跑到佇列中的 wait 狀態.

*{
  margin:0;
  padding:0;
}
*{
  box-sizing: border-box;
}
/* 隱藏其他圖片 */
.window{
  width: 300px;
  height: 200px;
  margin:20px auto;
  overflow:hidden;
}
.images{
  position:relative;
}
.images > img{
  width:100%;
  transition: all 2s;
  position: absolute;
  top: 0;
}
/* 當前圖片要在最頂層,防止被覆蓋 */
 .images >img.current{
  left: 0;
  transform: translateX(0);
  z-index: 1; 
 }
 /* 離開狀態,位於當前圖片的左側 */
 .images >img.leave{
   transform: translateX(-100%);
 }
 /* 等待狀態位於當前圖片的右側 */
 .images >img.wait{
   transform: translateX(100%);
 }
複製程式碼

js的作用就是適時的更改元素的類來選擇不同的樣式.

//為圖片設定當前狀態
$('.images > img:nth-child(1)').addClass('current')
$('.images > img:nth-child(2)').addClass('enter')
$('.images > img:nth-child(3)').addClass('enter')

let n = 0;
setInterval(() =>{
  $(`.images > img:nth-child(${n%3+1})`).removeClass('current').addClass('leave')
  //不用one()的話只要有動畫結束就會執行一次操作
  .one('transitionend', (e) => {
    $(e.currentTarget).removeClass('leave').addClass('enter')
  })
  $(`.images > img:nth-child(${(n%3+1)%3+1}`).removeClass('enter').addClass('current')
  n +=1;
}, 4000)

複製程式碼

相關文章