我的绝对定位版轮播图

2018-11-25 本文已影响0人 cj_jax

实现的思路：

1.首先准备一个父容器div，然后有ul和li，以及a标签，a标签包裹img，如图所示：

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<ol>

</ol>

</div>

2.在js中实现轮播图的功能思路

2.1.注册onload事件

2.2.获取元素

2.3.给父盒子定高

2.4.获取一张图片的宽度

2.5.设置三个位置，并初始化

2.6.封装下一张的方法

2.7.封装上一张的方法

2.1.注册onload事件

window.addEventListener('load',function () {

// 2.2.获取元素

var banner = document.querySelector('.jd_banner');

var ul = banner.querySelector('ul');

//获取所有的ul下的li标签

var imgs = ul.children;

//获取ol下的小圆点标签

var poins = banner.querySelectorAll('ol li');

//获取单个li标签的高度

var liHeight = imgs[0].offsetHeight;

//获取单个li标签的宽度

var liWidth = imgs[0].offsetWidth;

// console.log(liHeight,liWidth);

//给ul设置高度

ul.style.height = liHeight+'px';

//设置定时器间隔时间

var interval = 500;

//初始化三个位置

//轮播完成位置

var prev ;

//正在轮播位置

var now ;

//准备轮播位置

var next;

//三个位置封装

// 值为最后一张图片的下标

prev = prev || imgs.length-1;

// 值为第一张图片的下标

now = now || "0";

// 值为第二张图片的下标

next = next || "1";

// 各就各位，偏移到指定位置

// imgs[prev].style.transform="translateX("+ (-liWidth)+"px)";

objLate(imgs[prev],-liWidth);

// imgs[now].style.transform = "translateX(0px)";

objLate(imgs[now],0);

// imgs[next].style.transform="translateX("+liWidth+"px)";

objLate(imgs[next],liWidth);

//显示下一张

function playNext() {

//首先清除结束区域的位置的过渡

// console.log(imgs[prev]);

retion(imgs[prev]);

//返回牌堆

// imgs[prev].style.transform = "tran";

objLate(imgs[prev],2*liWidth);

//开始交换位置

//向左走，当前图片要放到结束区域，now-->prev 需要过渡离开

prev = now ;

addtion(imgs[prev]);

objLate(imgs[prev],-liWidth);

//准备区域的图片开始进入展示区域 next-->now 需要过渡进入

now = next;

addtion(imgs[now]);

objLate(imgs[now],0);

//立刻准备下一张图片进入准备区域不需要过渡

next++;

//判断是否为最后一张图片，如果是，加载第一张

if(next > imgs.length-1){

next = 0;

}

//准备图片就位

objLate(imgs[next],liWidth);

//小圆点同步

for ( var i = 0 ; i < poins.length ; i++) {

//清空所有小圆点的now的类名

poins[i].classList.remove('now');

}

// 给当前的对应的now的小圆点添加类名

poins[now].classList.add('now');

}

//显示上一张

function playPrev() {

//清除下一张准备

retion(imgs[next]);

//直接返回牌堆

objLate(imgs[next],2*liWidth);

//将当前的图片给准备区域 now--->next

next = now;

//添加过渡

addtion(imgs[next]);

//开始偏移

objLate(imgs[next],liWidth);

//把结束区域的图片放到当前区域

now = prev;

//添加过渡

addtion(imgs[now]);

//开始偏移

objLate(imgs[now],0);

//找上上张图片

prev--;

//判断当前prev是否为第一张

if(prev < 0){

prev = imgs.length-1;

}

//上上张图片就位

objLate(imgs[prev],-liWidth);

//同步小圆点

for ( var i = 0 ; i < poins.length ; i++) {

//清空所有小圆点的now的类名

poins[i].classList.remove('now');

}

// 给当前的对应的now的小圆点添加类名

poins[now].classList.add('now');

}

//注册手指事件

//记录开始位置的变量

var startX ;

//记录开始时间的变量

var startTime ;

//开始位置

ul.addEventListener('touchstart',function (e) {

//清除定时器目的：阻止图片滚动

clearInterval(timeId);

//记录按下的位置

startX = e.touches[0].clientX;

//记录开始时间

startTime = new Date;

});

//触摸移动

ul.addEventListener('touchmove',function (e) {

//计算移动距离

var distrans = e.touches[0].clientX - startX;

//清除三个过渡

//清除当前的展示完成图片的效果

retion(imgs[prev]);

//清除当前的正在展示图片的过渡效果

retion(imgs[now]);

//清除当前的即将展示图片的过渡效果

retion(imgs[next]);

//设置移动

// 在当前的位置的基础上开始移动

objLate(imgs[prev],-liWidth+distrans);

objLate(imgs[now],0+distrans);

objLate(imgs[next],liWidth+distrans);

});

//触摸结束

ul.addEventListener('touchend',function (e) {

//手机离开移动的距离

var distrans = e.changedTouches[0].clientX - startX;

//触摸的时长

var time = new Date - startTime;

//如果右滑超过三分之一图片的宽度切换上一张，或则滑屏时间小于100ms且滑动距离大于100px，同样显示上一张

if(distrans > liWidth/3 || distrans > 100 && time <100){

//显示上一张

playPrev();

}else if(distrans < -liWidth/3 || distrans < -100 && time <100){

// 如果左滑超过三分之一图片的宽度切换下一张，或则滑屏时间小于100ms且滑动距离大于100px，同样显示下一张

//显示下一张

playNext();

}else{

//不足以切换的，返回当前位置

// 添加过渡返回当前位置

addtion(imgs[prev]);

addtion(imgs[now]);

addtion(imgs[next]);

//设置移动

objLate(imgs[prev],-liWidth);

objLate(imgs[now],0);

objLate(imgs[next],liWidth);

}

//开启定时器

timeId = setInterval(playNext,interval);

});

//设置resize事件根据窗口的大小的改变，图片的尺寸也会发生改变，重新获取宽度，从当前位置初始化每张图片

window.addEventListener('resize',function () {

liWidth = banner.offsetWidth

// 获取图片的高度

ul.style.height = imgs[0].offsetHeight + 'px'

//清除三个过渡

retion(imgs[prev]);

retion(imgs[now]);

retion(imgs[next]);

//设置移动

objLate(imgs[prev],-liWidth);

objLate(imgs[now],0);

objLate(imgs[next],liWidth);

});

//开启定时器

var timeId = setInterval(playNext,interval);

//封装清除过渡

function retion(str) {

str.style.transition = "none";

}

//封装添加过渡

function addtion(str) {

str.style.transition = ".2s";

}

//封装偏移

function objLate(obj,number) {

obj.style.transform = "translateX("+number+"px)";

}

});

下一张实现流程图

playNext

我的绝对定位版轮播图

实现的思路：

下一张实现流程图

上一张实现流程图

猜你喜欢

热点阅读