CSS transition屬性實現滑動式輪播圖

godruoyi 發布于2019-08-30 13:11 / 2943人閱讀

摘要：是的，趁著在玩輪播我用又寫了個滑動式的輪播圖，是仿的嗶哩嗶哩嗶哩嗶哩。點我轉到思路這回我是用修改圖片的屬性，用的來實現動畫過程。滑動式的輪播圖圖片是怎么動的呢中間為輪播圖展示區。

是的，趁著在玩輪播我用transition又寫了個滑動式的輪播圖，是仿的嗶哩嗶哩嗶哩嗶哩。效果看下面咯。

點我轉到CodePen

思路

這回我是用JS修改圖片的left屬性，用CSS的transition來實現動畫過程。比如說一個圖left: 200px; transition: left 0.3s linear;，然后我用JS把這個圖的left改為0，這樣圖片就有個0.3s的左移動畫啦。

滑動式的輪播圖圖片是怎么動的呢？

“中間”為輪播圖展示區。假設有3張圖，我們理下邏輯。

初始的時候，所有圖片都位于“右邊”。然后圖1到“中間” → 圖1到“左邊” & 圖2到“中間” → 圖2到“左邊” & 圖3到“中間” → 圖2圖3到“右邊” & 圖1到“中間”。這樣一個循環的過程。

我用修改類名的方式來修改圖片的left值。沒有類名的時候圖片位于右側，有active類時圖片位于中間，有left類時位于左側。

img{
  left: 260px;  /*圖片均位于右側*/
  transition: left 0.3s linear;  /*改變left值實現動畫*/
}
img.active{
  left: 0;
}
img.left{
  left: -260px;
}

然后在JS里通過setInterval(code,millisec)來定時執行切換圖片的函數。

代碼

HTML


  
  
  
  
  
  
    
  
  
  刀劍亂舞-花丸-
  我太受歡迎了該怎么辦
  少女編號

CSS

*{
  padding: 0; 
  margin: 0;
}
/*-- 輪播圖整體樣式-- */
#slideshow{
  width: 260px;
  height: 248px;
  margin: 20px auto;
  border-radius: 5px; 
  overflow: hidden;
  position: relative;
}
/*-- 圖片樣式 --*/
#slideshow img{
  position: absolute;
  top: 0;
  left: 260px;  /*圖片均位于右側*/
  transition: left 0.3s linear;  /*改變left值實現動畫*/
}
#slideshow img.active{
  left: 0;
}
#slideshow img.left{
  left: -260px;
}
/*-- 頁碼樣式 --*/
#slideshow div{
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 0;
  text-align: center;
  padding: 5px 0;
  background: rgba(0,0,0,0.7);
}
#slideshow span{
  display: inline-block;
  width: 15px;
  height: 10px;
  margin: 0 3px;
  border-radius: 5px;
  background: white;
  transition: width 0.3s;
}
#slideshow span.active{
  width: 25px;
  background: rgb(216,83,127);
}
/*-- 圖片描述的樣式 --*/
#slideshow p{
  position: absolute;
  bottom: 20px;
  width: 100%;
  line-height: 20px;
  font-size: 14px;
  text-indent: 5px;
  color: white;
  background: rgba(0,0,0,0.4);
  cursor: default;
  opacity: 0;
  transition: opacity 0.3s linear;
}
#slideshow p.active{
  opacity: 1;
}

//---------主角：輪播圖函數-------------
function slideshow() {
  var slideshow=document.getElementById("slideshow"),
  imgs=slideshow.getElementsByTagName("img"), //圖片們
  pages=slideshow.getElementsByTagName("span"), //頁碼們
  descrips=slideshow.getElementsByTagName("p"), //描述們
  length=imgs.length, //圖片數目
  current=1; //current為當前活躍的圖片、頁碼、描述的編號

  function changeSlide() { //切換圖片的函數
    for (var i=0; i=length) {
      current=0;
    }
  }

  //每2s調用changeSlide函數進行圖片輪播
  var slideon=setInterval(changeSlide,2000);  

  slideshow.onmouseover=function(){
    clearInterval(slideon); //當鼠標移入時清除輪播事件
  }
  slideshow.onmouseout=function(){
    slideon=setInterval(changeSlide,2000); //當鼠標移出時重新開始輪播事件
  }

  for(var i=0; i

完。

云服務器 GPU云服務器 react實現輪播圖輪播圖寫輪播圖將輪播圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115373.html

CSS transition屬性實現滑動式輪播圖

摘要：是的，趁著在玩輪播我用又寫了個滑動式的輪播圖，是仿的嗶哩嗶哩嗶哩嗶哩。點我轉到思路這回我是用修改圖片的屬性，用的來實現動畫過程。滑動式的輪播圖圖片是怎么動的呢中間為輪播圖展示區。是的，趁著在玩輪播我用transition又寫了個滑動式的輪播圖，是仿的嗶哩嗶哩嗶哩嗶哩。效果看下面咯。點我轉到CodePen 思路這回我是用JS修改圖片的left屬性，用CSS的transition來實...

ybak 2019-08-22 10:45 評論0 收藏0
移動端輪播圖實現方法（dGun.js）

摘要：本文章介紹在移動端無縫隙輪播圖實現的原理，這個輪子比較簡單，但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支持手勢左右滑動。就是小的控制點了，但移動端沒有點擊小點的功能。本文章介紹在移動端無縫隙輪播圖實現的原理，這個輪子比較簡單，但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支持手勢左右滑動。最后會放上源...

hyuan 2019-08-29 17:01 評論0 收藏0
移動端輪播圖實現方法（dGun.js）

摘要：本文章介紹在移動端無縫隙輪播圖實現的原理，這個輪子比較簡單，但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支持手勢左右滑動。就是小的控制點了，但移動端沒有點擊小點的功能。本文章介紹在移動端無縫隙輪播圖實現的原理，這個輪子比較簡單，但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支持手勢左右滑動。最后會放上源...

littleGrow 2019-08-02 11:45 評論0 收藏0
移動端輪播圖實現方法（dGun.js）

摘要：本文章介紹在移動端無縫隙輪播圖實現的原理，這個輪子比較簡單，但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支持手勢左右滑動。就是小的控制點了，但移動端沒有點擊小點的功能。本文章介紹在移動端無縫隙輪播圖實現的原理，這個輪子比較簡單，但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支持手勢左右滑動。最后會放上源...

waruqi 2019-08-23 12:25 評論0 收藏0