700字范文 > 原生JS实现移动端轮播图。

原生JS实现移动端轮播图。

时间：2020-07-02 10:48:23

相关推荐

原生JS实现移动端轮播图。

话不多说直接上代码。

html 结构

css样式

1.设置一下轮播的页面结构，以及获取一下需要用到的元素。

/*获取轮播图结构*/var banner=document.querySelector(".jd_banner");/*获取图片容器*/var imgBox=banner.querySelector("ul:first-of-type");/*获取原始的第一张图片*/var first=imgBox.querySelector("li:first-of-type");/*获取原始的最后一张图片*/var last=imgBox.querySelector("li:last-of-type");/*在首尾插入两张图片 cloneNode:复制一个dom元素*/imgBox.appendChild(first.cloneNode(true));/*insertBefore(需要插入的dom元素，位置)*/imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);/*获取所有图片li元素*/var lis=imgBox.querySelectorAll("li");/*获取li元素的数量*/var count=lis.length;/*.获取banner的宽度*/var bannerWidth=banner.offsetWidth;/*设置图片盒子的宽度*/imgBox.style.width=count*bannerWidth+"px";/*设置每一个li(图片)元素的宽度*/for(var i=0;i<lis.length;i++){lis[i].style.width=bannerWidth+"px";}/*定义图片索引:图片已经有一个宽度的默认偏移*/var index=1;/*设置默认的偏移*/imgBox.style.left=-bannerWidth+"px";

2.实现自动轮播

var timerId;var startTime=function(){timerId=setInterval(function(){index++;imgBox.style.transition="left 0.5s ease-in-out";/*5.3 设置偏移*/imgBox.style.left=(-index*bannerWidth)+"px";/*5.4 判断是否到最后一张，如果是则回到索引1的位置*/setTimeout(function(){if(index==count-1){index=1;imgBox.style.transition="none";/*偏移到指定的位置*/imgBox.style.left=(-index*bannerWidth)+"px";indicators[count - 3].classList.remove('active');indicators[0].classList.add('active');}},500);},1000);}startTime();

3.实现点标记

var indicators=banner.querySelector("ul:last-of-type").querySelectorAll("li");var setIndicator=function(index){/*先清除其它li元素的active样式*/for(var i=0;i<indicators.length;i++){indicators[i].classList.remove("active");}/*为当前li元素添加active样式*/indicators[index-1].classList.add("active");}

4.实现手动轮播

var startX,moveX,distanceX;/*标记当前过渡效果是否已经执行完毕*/var isEnd=true;/*为图片添加触摸事件--触摸开始*/imgBox.addEventListener("touchstart",function(e){clearInterval(timerId);/*获取当前手指的起始位置*/startX= e.targetTouches[0].clientX;});/*为图片添加触摸事件--滑动过程*/imgBox.addEventListener("touchmove",function(e){if(isEnd==true){/*记录手指在滑动过程中的位置*/moveX= e.targetTouches[0].clientX;distanceX=moveX-startX;/*为了保证效果正常，将之前可能添加的过渡样式清除*/imgBox.style.transition="none";/* 本次的滑动操作应该基于之前轮播图已经偏移的距离*/imgBox.style.left=(-index*bannerWidth + distanceX)+"px";}});/*添加触摸结束事件*/imgBox.addEventListener("touchend",function(e){/*松开手指，标记当前过渡效果正在执行*/isEnd=false;/*获取当前滑动的距离，判断距离是否超出指定的范围 100px*/if(Math.abs(distanceX) > 100){/*判断滑动的方向*/if(distanceX > 0){//上一张index--;}else{ //下一张index++;}/*翻页*/imgBox.style.transition="left 0.5s ease-in-out";imgBox.style.left=-index*bannerWidth+"px";}else if(Math.abs(distanceX) > 0){ //得保证用户确实进行过滑动操作/*回弹*/imgBox.style.transition="left 0.5s ease-in-out";imgBox.style.left=-index*bannerWidth+"px";}/*将上一次move所产生的数据重置为0*/startX=0;moveX=0;distanceX=0;});/*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/imgBox.addEventListener("webkitTransitionEnd",function(){console.log("webkitTransitionEnd");/*如果到了最后一张(count-1)，回到索引1*//*如果到了第一张(0)，回到索引count-2*/if(index==count-1){index=1;imgBox.style.transition="none";imgBox.style.left=-index*bannerWidth+"px";}else if(index==0){index=count-2;imgBox.style.transition="none";imgBox.style.left=-index*bannerWidth+"px";}/*设置标记*/setIndicator(index);setTimeout(function(){isEnd=true;clearInterval(timerId);startTime();},100);});

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。