JavaScript實現(xiàn)移動端帶transition動畫的輪播效果

更新時間：2020年03月24日 09:38:09 作者：qq_34220109

這篇文章主要介紹了JavaScript原生實現(xiàn)帶transition動畫的自動+手動輪播效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

JavaScript實現(xiàn)輪播的方式多種多樣，桌面的移動端的實現(xiàn)方式都是大同小異的，具體的核心實現(xiàn)原理不外乎下面幾個要點。即：

1. 確定播放方向。一般都是橫向輪播，當然不排除縱向的需求可能。當然還有反向播放情況，這個自定義。
2. 對第一張圖片的處理。如果當前是第一張了，那么如果繼續(xù)往前面(就是你播放方向的反向)滑動，那么就會出現(xiàn)留白（如果你允許繼續(xù)滑動的話，不過不允許滑動也沒有啥意思了，除非你想來回輪播，這個我在另一篇用jQuery也說明過），此時應(yīng)該讓你的左邊顯示應(yīng)該輪播圖片的最后一張，實現(xiàn)無縫連接。
3. 對最后一張圖片的處理。跟第一張一樣，你需要在繼續(xù)滑動的時候顯示第一張圖片，實現(xiàn)無縫連接。
4. 對標記跟隨原點的處理。這個需要對原點的排列方式和下標進行嚴謹?shù)倪壿嬇袛唷?/p>

我這里是在移動端的一個輪播效果，純JavaScript原生實現(xiàn)，應(yīng)該說很接近工作實際了。請諸位爺上眼。

注意：如果您想實現(xiàn)跟我一樣的效果，請務(wù)必按我的樣式和架構(gòu)來寫

HTML部分

<div id="box">
 <ul id="lilist">
 <li><img src="5.jpg" alt=""></li>
 <li><img src="1.jpg" alt=""></li>
 <li><img src="2.jpg" alt=""></li>
 <li><img src="3.jpg" alt=""></li>
 <li><img src="4.jpg" alt=""></li>
 <li><img src="5.jpg" alt=""></li>
 <li><img src="1.jpg" alt=""></li>
 </ul>
 <ul id="items">
 <li class="active"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
</div>

CSS部分

 *{ margin: 0;padding: 0; }
 html,body{ height: 100%;}
 #box{
  width: 100%;
  overflow: hidden;
  position: relative;
 }
 #box #lilist{
  /* 寬度根據(jù)子元素個數(shù)動態(tài)確定 */
  /*width: 500%;*/
  position: relative;
  float: left;
  white-space: nowrap;
  list-style: none;
  overflow: hidden;
 }
 #box #lilist li{
  float: left;
  height: 200px;
 }
 #box #lilist li img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
 }

 #box #items{
  position: absolute;
  list-style: none;
  width: 30%;
  bottom: 10px;
  left: 35%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
 }
 #box #items li{
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: black;
 }
 #box #items .active{
  background-color: red;
 }

重點來啦，JavaScript原生代碼：

window.onload = function(){
var totalli1 = document.querySelectorAll("#box>#lilist>li");
 var totalli2 = document.querySelectorAll("#box>#items>li");

 // 動態(tài)改變輪播圖寬度
 changewidth();
 function changewidth(){
 var newstyle = document.createElement("style");
 var mycss = "#lilist{ width : "+totalli1.length+"00% }";
  mycss += "#lilist li{ width : "+(100/totalli1.length)+"% }"
 newstyle.innerHTML = mycss;
 document.head.appendChild(newstyle);
 }

 var getbox = document.getElementById("box");
 var getlist = document.getElementById("lilist");
 var startx = 0, endx = 0, disx = 0;
 var listleft = 0, finalx = 0;
 var windowx = document.documentElement.offsetWidth;
 var listx = getlist.offsetWidth;
 var moveindex = 0;
 // 自動輪播控制變量
 var num = 1, index = 0;
 // 先讓他左滑
 transforms(getlist,"translateX",-windowx);

 getbox.addEventListener("touchstart",function(event){
 let touch = event.changedTouches[0];
 startx = touch.clientX;
 // 首位位置判斷，并重新定位.鼠標剛放上去就要改變位置，不然move移動再改的話會和移動的transform沖突，也不能在鼠標離開時切換，會影響到移動的滑動效果。這個過程中是瞬間完成的，不允許過渡或動畫，顯得平滑。
 let lastx = Math.round(-transforms(getlist,"translateX")/windowx);
 if(lastx<1){
  lastx = totalli1.length-2;
 }else if(lastx>totalli1.length-2){
  lastx = 1;
 }
 // 移動到指定位置
 transforms(getlist,"translateX",-lastx*windowx);
 // 給 listleft 賦值
 listleft = transforms(getlist,"translateX");
 // 清除過度緩沖
 getlist.style.transition = "none";
 // 清除計時器
 window.clearInterval(timer);
 })
 getbox.addEventListener("touchmove",function(event){
 let touch = event.changedTouches[0];
 endx = touch.clientX;
 disx = endx - startx;
 finalx = disx+listleft;

 transforms(getlist,"translateX",finalx)
 })
 getbox.addEventListener("touchend",function(event){
 let touch = event.changedTouches[0];
 // 滑動的屏寬個數(shù)。
 let lastx = 0;
 // ul 距屏幕左側(cè)的距離與屏寬的比例
 lastx = Math.round(-transforms(getlist,"translateX")/windowx);
 if(lastx<=0){
  lastx = 0;
 }else if(lastx>totalli1.length-1){
  lastx = totalli1.length-1;
 }
 transforms(getlist,"translateX",-lastx*windowx);
 getlist.style.transition = "transform 0.3s";
 // 下部紅點跟隨,獲取下標。諸位請注意下面幾個數(shù)字的含義，4,5,6的意思你們自己思考一下
 moveindex = lastx-1;
 if(lastx==1||lastx==6){
  moveindex = 0;
 }else if(lastx==0||lastx==5){
  moveindex = 4;
 }
 movecircle(moveindex);
 // 重新添加計時器，自動輪播
 timer = window.setInterval(playself,3000);
 // 改變num和index的值,以確定計時器開始位置
 console.log(moveindex+"。。。"+lastx)
 index = moveindex;
 num = lastx;
 })
 // 自動輪播
 var timer = window.setInterval(playself,3000);
 function playself(){
 // 清除過渡殘留
 getlist.style.transition = "none";
 if(num==totalli1.length-1){
  transforms(getlist,"translateX",-windowx);
  num = 1;
 }
 // 再添加一個一次性計時器即可分開與 interval 的沖突
 setTimeout(function(){
  transforms(getlist,"translateX",-windowx*(++num));
  getlist.style.transition = "transform 0.5s";
  // 原點跟隨移動
  index++;
  if(index==totalli2.length){
  index = 0;
  totalli2[index].classList.add("active");
  }
  movecircle(index);
 },1)
 }
 // 紅點移動函數(shù)
 function movecircle(getindex){
 for(let i=0;i<totalli2.length;i++){
  totalli2[i].classList.remove("active");
  if(getindex==i){
  totalli2[getindex].classList.add("active");
  }
 }
 }
}

代碼還有一些算法部分的瑕疵，本人愚鈍，目前只能想到這種方式了，有些變量可能會占用太多內(nèi)存，希望各位僅作參考，如有大神指出問題所在，萬分感謝。最后，誠心感謝有緣人的觀看！祝你生活愉快，工作順利！

總結(jié)

到此這篇關(guān)于JavaScript實現(xiàn)移動端帶transition動畫的輪播效果的文章就介紹到這了,更多相關(guān)js transition 輪播內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: