JS仿京东移动端手指拨动切换轮播图效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS仿京东移动端手指拨动切换轮播图效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4375字，纯文字阅读大概需要7分钟。

内容图文

如今，移动端web页面在市场上也是占有相当大的比例，而移动端的轮播图效果也是很常见的，今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果。
这个效果的主要技术点依托于触屏设备特有的touch事件；好了，接下来就进入主题吧。

首先是html布局：

1. 这里强调的是记得给html加上viewport这个适口属性。
2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张，要想达到理想效果，需要给第一张图片前面加上最后一张图片，而在最后一张图片后加上第一张图片。
3. f_l代表的是左浮动

**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样式：

注意，此处并没有加上常规的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 过渡结束后触发的效果，在这儿主要是保证图片切换到最后一张我们手动增加的图片完成的瞬间，切换回到真正的第一张图片处；
2. touch事件的三要素： touchstart--手指按上时，touchmove－－手指移动时，touchend－－手指松开屏幕时；
3. event.touches[0].clientX获取按下一个手指时的位置，可以打印出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;

 //默认显示的应该是第二张图片
 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";
 }

 //设置移动距离
 function setTranslateX(distance) {
  bannerImgs.style.webkitTransform = "translateX(" + distance + "px)";
  bannerImgs.style.transform = "translateX(" + distance + "px)";
 }

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

 //设置定时器
 var timer = setInterval(function() {
  index++;
  setTransition();
  setTranslateX(screenWidth * index * -1);
 }, 1000);

 //添加过渡动画结束事件
 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);
 })
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的JS仿京东移动端手指拨动切换轮播图效果全部内容，希望文章能够帮你解决JS仿京东移动端手指拨动切换轮播图效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端