JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果

更新時(shí)間：2020年04月10日 16:38:51 作者：小白變怪獸

這篇文章主要為大家詳細(xì)介紹了JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

如今，移動(dòng)端web頁面在市場上也是占有相當(dāng)大的比例，而移動(dòng)端的輪播圖效果也是很常見的，今天我就來記錄下關(guān)于實(shí)現(xiàn)一組適用于移動(dòng)端的可用手指進(jìn)行撥動(dòng)切換輪播圖的效果。
這個(gè)效果的主要技術(shù)點(diǎn)依托于觸屏設(shè)備特有的touch事件；好了，接下來就進(jìn)入主題吧。

首先是html布局：

1. 這里強(qiáng)調(diào)的是記得給html加上viewport這個(gè)適口屬性。
2. 由于在撥動(dòng)第一張圖片以及最后一張圖片的時(shí)候需要切換到最后一張以及第一張，要想達(dá)到理想效果，需要給第一張圖片前面加上最后一張圖片，而在最后一張圖片后加上第一張圖片。
3. f_l代表的是左浮動(dòng)

**html代碼如下：**

  <ul class='banner_imgs clearfix'>
   <li class='f_l'>
   <a href="#"><img src="image/l8.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l1.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l2.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l3.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l4.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l5.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l6.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l7.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l8.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l1.jpg" alt="" /></a>
   </li>
  </ul>
  <!-- 輪播圖的 索引 -->
  <ul class="banner_index clearfix">
   <li class="current"></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>

接下來是css樣式：

注意，此處并沒有加上常規(guī)的reset樣式代碼

.jd_banner .banner_imgs {
 /* 10倍屏幕寬度 */
 width: 1000%;
}
.jd_banner .banner_imgs li {
 /* 一倍的屏幕寬度 */
 width: 10%;
}
.jd_banner .banner_imgs li a {
 display: block;
 width: 100%;
}
.jd_banner .banner_imgs li a img {
 display: block;
 width: 100%;
}
.jd_banner .banner_index {
 position: absolute;
 bottom: 15px;
 left: 50%;
 margin-left: -64px;
}
.jd_banner .banner_index li {
 float: left;
 width: 6px;
 height: 6px;
 border: 1px solid white;
 border-radius: 50%;
 margin: 0 5px;
}
.jd_banner .banner_index li.current {
 background-color: #fff;
}

最后是最最重要的js代碼啦

1. transitionend 過渡結(jié)束后觸發(fā)的效果，在這兒主要是保證圖片切換到最后一張我們手動(dòng)增加的圖片完成的瞬間，切換回到真正的第一張圖片處；
2. touch事件的三要素： touchstart--手指按上時(shí)，touchmove－－手指移動(dòng)時(shí)，touchend－－手指松開屏幕時(shí)；
3. event.touches[0].clientX獲取按下一個(gè)手指時(shí)的位置，可以打印出event查看其包含有哪些屬性方法；

window.onload = function() {
 slide();
}

function slide() {
 var bannerImgs = document.querySelector(".banner_imgs");
 var Indexs = document.querySelectorAll(".banner_index li");
 var imgLis = document.querySelectorAll(".banner_imgs li");

 //屏幕寬度
 var screenWidth = document.body.offsetWidth;
 var index = 1;

 //默認(rèn)顯示的應(yīng)該是第二張圖片
 bannerImgs.style.transform = "translateX(" + screenWidth * index * -1 + "px)";

 //添加過渡效果
 function setTransition() {
 bannerImgs.style.webkitTransition = "all .2s";
 bannerImgs.style.transition = "all .2s";
 }

 //清除過渡效果
 function clearTransition() {
 bannerImgs.style.webkitTransition = "none";
 bannerImgs.style.transition = "none";
 }

 //設(shè)置移動(dòng)距離
 function setTranslateX(distance) {
 bannerImgs.style.webkitTransform = "translateX(" + distance + "px)";
 bannerImgs.style.transform = "translateX(" + distance + "px)";
 }

 //控制小圓點(diǎn)
 function setPoint() {
 for (var i = 0; i < Indexs.length; i++) {
  Indexs[i].className = "";
 }
 Indexs[index - 1].className = "current";
 }

 //設(shè)置定時(shí)器
 var timer = setInterval(function() {
 index++;
 setTransition();
 setTranslateX(screenWidth * index * -1);
 }, 1000);

 //添加過渡動(dòng)畫結(jié)束事件
 bannerImgs.addEventListener("transitionend", function() {
 if (index > 8) {
  index = 1;
 } else if (index < 1) {
  index = 8;
 }
 clearTransition();
 setTranslateX(screenWidth * index * -1);
 setPoint();
 })


 //添加touch事件
 var startX = 0;
 var moveX = 0;
 var isMove = false;

 bannerImgs.addEventListener("touchstart", function(event) {
 isMove = false;
 clearInterval(timer);
 startX = event.touches[0].clientX;
 })

 bannerImgs.addEventListener("touchmove", function(event) {
 isMove = true;
 moveX = event.touches[0].clientX - startX;
 setTranslateX(moveX + index * screenWidth * -1);
 })

 bannerImgs.addEventListener("touchend", function(event) {
 if(isMove && Math.abs(moveX) > screenWidth/3){
  if (moveX < 0) {
  index++;
  } else if (moveX > 0) {
  index--;
  }
 }
 setTransition();
 setTranslateX(index * screenWidth * -1);
 timer = setInterval(function() {
  index++;
  setTransition();
  setTranslateX(screenWidth * index * -1);
 }, 1000);
 })
}

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: