html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

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

[ ] 已经帮助:人解决问题

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

首先是html布局SwWHTML5中文学习网 - HTML5先行者学习网

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

**html代码如下:**SwWHTML5中文学习网 - HTML5先行者学习网
SwWHTML5中文学习网 - HTML5先行者学习网

    <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样式SwWHTML5中文学习网 - HTML5先行者学习网

注意,此处并没有加上常规的reset样式代码SwWHTML5中文学习网 - HTML5先行者学习网
SwWHTML5中文学习网 - HTML5先行者学习网

.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代码SwWHTML5中文学习网 - HTML5先行者学习网

1. transitionend 过渡结束后触发的效果,在这儿主要是保证图片切换到最后一张我们手动增加的图片完成的瞬间,切换回到真正的第一张图片处;SwWHTML5中文学习网 - HTML5先行者学习网
2. touch事件的三要素: touchstart--手指按上时,touchmove--手指移动时,touchend--手指松开屏幕时;SwWHTML5中文学习网 - HTML5先行者学习网
3. event.touches[0].clientX获取按下一个手指时的位置,可以打印出event查看其包含有哪些属性方法;SwWHTML5中文学习网 - HTML5先行者学习网
SwWHTML5中文学习网 - HTML5先行者学习网

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); })}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。SwWHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助