移动端轮播源码(可用）
- 主打移动端。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta charset='UTF-8' name='viewport'
content='width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0' />
<title>滑屏</title>
<link rel="stylesheet" href="./Css/slidings.min.css">
<style>
.slide {
width: 100%;
height: 240px;
margin: auto;
position: relative;
overflow: hidden;
}
.slide .wrapper {
height: 100%;
position: absolute;
}
.slide .wrapper>.item {
overflow: hidden;
width: 100%;
height: 100%;
}
/*切换按钮*/
.slide .switch {
width: 100%;
position: absolute;
top: 50%;
z-index: 999;
}
.slide .none {
display: none;
}
.slide .wrapper .back-hide {
z-index: 1;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.slide .block {
display: block;
}
.slide .switch>div {
cursor: pointer;
height: 35px;
width: 20px;
border-radius: 2px;
position: absolute;
background: rgba(0, 0, 0, .2);
transform: translateY(-50%);
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.slide .switch>div:active {
background: rgba(255, 255, 255, .5);
}
.slide .switch .last {
left: .3125rem;
}
.slide .switch .next {
right: .3125rem;
}
.slide .switch .last::after,
.slide .switch .next::after {
position: absolute;
content: "";
width: 10px;
height: 10px;
top: 50%;
left: 50%;
border-top: .0625rem solid #fff;
}
.slide .switch .last::after {
border-left: .0625rem solid #fff;
transform: translate(-20%, -50%) rotateZ(-45deg);
}
.slide .switch .next::after {
border-right: .0625rem solid #fff;
transform: translate(-70%, -50%) rotateZ(45deg);
}
.slide .prompt {
cursor: pointer;
z-index: 999;
position: absolute;
width: auto;
height: auto;
bottom: 6px;
}
/* tip位置 */
.slide .center {
left: 50%;
transform: translateX(-50%);
}
.slide .left {
left: 2%;
}
.slide .right {
right: 2%;
}
.slide .switch .no-select {
cursor: no-drop;
background: rgba(255, 255, 255, .3);
}
.slide .switch .no-select:hover {
background: rgba(255, 255, 255, .3);
}
/*轮播提示1*/
.slide .prompt-circle>div {
box-shadow: 1px 0 3px rgba(0, 0, 0, .3);
background: rgba(240, 252, 255, .5);
width: 5px;
height: 5px;
margin: 0 2px;
float: left;
text-align: center;
border-radius: 50%;
}
.slide .prompt-circle .selected {
background: #fff;
}
/*轮播提示2*/
.slide .prompt-number {
text-align: center;
color: white;
font-size: .8em;
text-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
}
/*轮播提示3*/
.slide .prompt-square>div {
box-shadow: 1px 0 3px rgba(0, 0, 0, .3);
background: rgba(240, 252, 255, .5);
width: 8px;
height: 2px;
margin: 0 2px;
float: left;
text-align: center;
}
.slide .prompt-square .selected {
background: #44cef6;
}
/* 媒体查询 */
@media screen and (min-width:500px) {
.slide .switch>div {
cursor: pointer;
height: 40px;
width: 25px;
}
.slide {
width: 50%;
height: 300px;
}
/* 左右按钮 */
.slide .switch>div:hover {
background: rgba(0, 0, 0, .35);
}
.slide .switch>div:active {
background: rgba(255, 255, 255, .5);
}
/*轮播提示1*/
.slide .prompt-circle>div {
margin: 0 4px;
float: left;
width: 6px;
height: 6px;
}
/*轮播提示2*/
.slide .prompt-number {
cursor: default;
text-align: center;
color: white;
font-size: .8em;
}
/*轮播提示3*/
.slide .prompt-square>div {
width: 10px;
height: 2.5px;
margin: 0 4px;
float: left;
}
}
</style>
<!-- 设置slide元素宽高 -->
<style type="text/css">
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: auto;
overflow: auto;
}
.slide {
width: 300px;
height: 220px;
}
.bxo {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<h1>默认效果</h1>
<div class="slide1">
<div class="wrapper">
<div class="item">
<div class="bxo" style="background-color: #44cef6;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #dbf644;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #f64462;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #f6b244;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #444af6;"></div>
</div>
</div>
</div>
<h1>3D效果</h1>
<div class="slide2">
<div class="wrapper">
<div class="item">
<div class="bxo" style="background-color: #44cef6;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #dbf644;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #f64462;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #f6b244;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #444af6;"></div>
</div>
</div>
</div>
<h1>无轮播，显示按钮效果</h1>
<div class="slide3">
<div class="wrapper">
<div class="item">
<div class="bxo" style="background-color: #44cef6;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #dbf644;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #f64462;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #f6b244;"></div>
</div>
<div class="item">
<div class="bxo" style="background-color: #444af6;"></div>
</div>
</div>
</div>
<script>
;
(function (window, document) {
//构造函数
var Slide = function Slide(el, typeObj) {
//轮播父级
this.el = el;
// 设置el
if (typeof el === 'string') {
if (el.indexOf('.') !== -1) {
this.el = document.getElementsByClassName(this.el.replace(/^./, ''))[0];
} else if (el.indexOf('#') !== -1) {
this.el = document.getElementById(this.el.replace(/^#/, ''));
}
} else {
if (this.el.id) {
this.el = document.getElementById(this.el.id);
} else if (this.el.className) {
this.el = document.getElementsByClassName(this.el.className)[0];
}
};
//轮播参数
this.typeObj = typeObj ? typeObj : null;
//轮播宽度
this.elWid = this.el.offsetWidth;
//轮播wrapper
this.wrapper = this.el.getElementsByClassName("wrapper")[0];
// item元素
this.itemHtml = '';
//轮播长度
this.length = this.wrapper.children.length;
// 是否无限滑动
this.loop = true;
// 效果
this.ef = "tsion";
// 圆点提示类型[vis,num] vis可视化， num数字
this.tipType = 'vis';
// 轮播下标
this.index = 0;
// 轮播x轴位置
this.elementX = 0;
// 轮播定时器
this.timer = null;
// 轮播时间 默认3000毫秒轮播一次
this.atcrTime = 3000;
// 是否开启轮播
this.atcr = true;
//初始化
this.init();
};
//方法
Slide.prototype = {
// 获取参数
params: function () {
var pars = {};
/**
* 3种情况
* 第一种：无参数
* 第二种：有参数
* 第三种：参数重复
*/
//判断typeObj是否真实传入参数
if (this.typeObj && Object.keys(this.typeObj).length !== 0) {
//循环所有属性，设置pars对象
for (let item in this.typeObj) {
//执行
pars[item] = this.typeObj[item];
};
// 开始渲染
this.render(pars);
} else {
this.render();
};
},
// 轮播特效
crefs: function (wrapper) {
var wrapper = this.el.getElementsByClassName('wrapper')[0],
item = wrapper.getElementsByClassName('item'),//轮播item
startX = startY = isLoop = lastItem = nextItem = nowItem = moveX = disX = X = 0,//轮播所需默认值
isFirst = isX = true;
startTouch = moveTouch = startTime = endTime = exceed = null,
degPx = 90 / this.elWid;//px转deg
return {
// 平移效果
tsion: () => {
//touchstart手指开始触碰
this.el.addEventListener(this.isPc() ? 'mousedown' : 'touchstart', e => {
// 清除定时器
if (this.atcr) clearInterval(this.timer);
// 清除过渡效果
wrapper.style.transition = 'none';
// 是否到达第一张或最后一张
this.crefs().start();
if (!this.isPc()) {
// 获取手指
startTouch = e.changedTouches[0];
// start时间
startTime = new Date();
startX = startTouch.clientX;
startY = startTouch.clientY;
}
}, false);
//手指move
this.el.addEventListener("touchmove", e => {
e.preventDefault();
// 轮播状态或上下滑动
if (!isX) return;
moveTouch = e.changedTouches[0];
moveY = moveTouch.clientY - startY;
moveX = moveTouch.clientX - startX;
disX = moveX + this.elementX;
//如果上下滑动则不不操作
if (isFirst) {
isFirst = false;
if (Math.abs(moveY) > Math.abs(moveX)) {
isX = false;
return;
}
};
// 橡皮经效果
if (this.loop === false) {
//左
if (this.index === 0 && moveX > 0) {
if (moveX >= (this.elWid - startX) / 2) {
isLoop += .2;
disX = (this.elWid - startX) / 4 + this.elementX + isLoop;;
} else if (moveX >= (this.elWid - startX) / 4) {
isLoop += .4;
disX = (this.elWid - startX) / 4 + this.elementX + isLoop;;
}
// 右
} else if (this.index === this.length - 1 && moveX < 0) {
if (-moveX >= startX / 2) {
isLoop += -.2;
disX = (-startX / 4) + this.elementX + isLoop;
} else if (-moveX >= startX / 4) {
isLoop += -.4;
disX = (-startX / 4) + this.elementX + isLoop;
};
}
};
// 轮播特效
wrapper.style.transform = "translate3d(" + disX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
});
//手指end
this.el.addEventListener("touchend", () => {
// 开启轮播
if (this.atcr) this.autocar(this.atcr);;
// 重置变量
isFirst = isX = true, isLoop = 0;
// 如果没有滑动则不执行
if (moveX === 0) return;
wrapper.style.transition = 'all .3s cubic-bezier(.4, 0, .2, 1)';
endTime = new Date();
// 是否低于300毫秒
exceed = endTime - startTime <= 300,
// 当前元素下标
index = Math.abs(disX / this.elWid);
// 是否无限滑||非首尾位置
if (this.loop === true || !(this.loop === false && (this.index === 0 && moveX > 0) || (this.index === this.length - 1 && moveX < 0))) {
// 如果滑动时间低于300毫秒
if (exceed) {
moveX < 0 ? this.index = Math.ceil(index) : this.index = Math.floor(index);
// 左||右划
} else if (moveX < 0 || moveX > 0) {
this.index = Math.round(index);
};
}
// 重置滑动的值
moveX = 0;
// 移动元素位置
this.elementX = this.elWid * (-this.index);
// 开始移动
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
// 圆点处理
this.tip(this.index % this.length);
this.isClick();
});
},
// 魔方效果
rubcu: () => {
//touchstart手指开始触碰
this.el.addEventListener(this.isPc() ? 'mousedown' : 'touchstart', e => {
// 清除定时器
if (this.atcr) clearInterval(this.timer);
// 清除过渡效果
wrapper.style.transition = 'none';
// 是否到达第一张或最后一张
this.crefs().start();
if (!this.isPc()) {
// 获取手指
startTouch = e.changedTouches[0];
// start时间
startTime = new Date();
startX = startTouch.clientX;
startY = startTouch.clientY;
X = (this.elWid - startX) / 4;
}
}, false);
//手指move
this.el.addEventListener("touchmove", e => {
e.preventDefault();
// 轮播状态或上下滑动
if (!isX) return;
moveTouch = e.changedTouches[0];
moveY = moveTouch.clientY - startY;
moveX = moveTouch.clientX - startX;
disX = moveX + this.elementX;
//如果上下滑动则不不操作
if (isFirst) {
isFirst = false;
if (Math.abs(moveY) > Math.abs(moveX)) {
isX = false;
return;
}
};
// 移动转旋转
nowItem = moveX * degPx;
if (this.loop === true) {
if (moveX < 0) {
item[this.index].style.transformOrigin = '100% 0';
nextItem = 90 - Math.abs(nowItem);
item[this.index + 1].style.transform = `rotateY(${nextItem}deg)`;
} else if (moveX > 0) {
item[this.index].style.transformOrigin = '0 0';
lastItem = -90 + nowItem;
item[this.index - 1].style.transform = `rotateY(${lastItem}deg)`
}
// 不能无限滑屏
} else {
// 左划
if (moveX < 0) {
item[this.index].style.transformOrigin = '100% 0';
// 最后一张
if (this.index === this.length - 1) {
if (-moveX >= startX / 2) {
isLoop += -.2;
disX = (-startX / 4) + this.elementX + isLoop;
nowItem = (-startX / 4) * degPx + isLoop * degPx;
} else if (-moveX >= startX / 4) {
isLoop += -.4;
disX = (-startX / 4) + this.elementX + isLoop;
nowItem = (-startX / 4) * degPx + isLoop * degPx;
};
} else {
nextItem = 90 - Math.abs(nowItem);
item[this.index + 1].style.transform = `rotateY(${nextItem}deg)`;
}
// 右滑
} else if (moveX > 0) {
item[this.index].style.transformOrigin = '0 0';
// 第一张
if (this.index === 0) {
if (moveX >= (this.elWid - startX) / 2) {
isLoop += .2;
disX = X + this.elementX + isLoop;
nowItem = X * degPx + isLoop * degPx;
} else if (moveX >= X) {
isLoop += .4;
disX = X + this.elementX + isLoop;;
nowItem = X * degPx + isLoop * degPx;
}
} else {
lastItem = -90 + nowItem;
item[this.index - 1].style.transform = `rotateY(${lastItem}deg)`;
}
}
};
// 正面item
item[this.index].style.transform = `rotateY(${nowItem}deg)`;
// 轮播特效
wrapper.style.transform = "translate3d(" + disX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
});
//手指end
this.el.addEventListener("touchend", () => {
// 开启轮播
if (this.atcr) this.autocar(this.atcr);
// 重置变量
isFirst = isX = true, isLoop = 0;
//如果没有滑动则不执行
if (moveX === 0) return;
wrapper.style.transition = 'all .3s cubic-bezier(.4, 0, .2, 1)';
endTime = new Date();
// 是否低于300毫秒
exceed = endTime - startTime <= 300,
// 当前元素下标
index = Math.abs(disX / this.elWid);
// 是否无限滑||非首尾位置
if (this.loop === true || !(this.loop === false && (this.index === 0 && moveX > 0) || (this.index === this.length - 1 && moveX < 0))) {
// 如果滑动时间低于300毫秒
if (exceed) {
if (moveX < 0) {
this.index = Math.ceil(index);
item[this.index - 1].style.transition = 'all .3s cubic-bezier(.4, 0, .2, 1)';
item[this.index - 1].style.transform = 'rotateY(-90deg)';
} else {
this.index = Math.floor(index);
item[this.index + 1].style.transition = 'all .3s cubic-bezier(.4, 0, .2, 1)';
item[this.index + 1].style.transform = 'rotateY(90deg)';
}
// 左||右划
} else {
this.index = Math.round(index);
if (item[this.index - 1]) {
item[this.index - 1].style.transition = 'all .3s cubic-bezier(.4, 0, .2, 1)';
item[this.index - 1].style.transform = 'rotateY(-90deg)';
}
if (item[this.index + 1]) {
item[this.index + 1].style.transition = 'all .3s cubic-bezier(.4, 0, .2, 1)';
item[this.index + 1].style.transform = 'rotateY(90deg)';
}
}
}
item[this.index].style.transition = 'all .3s cubic-bezier(.4, 0, .2, 1)';
item[this.index].style.transform = 'rotateY(0)';
// 重置滑动的值
moveX = 0;
// 移动元素位置
this.elementX = this.elWid * (-this.index);
// 开始移动
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
// 圆点处理
this.tip(this.index % this.length);
this.isClick();
});
},
//刚开始执行&&手指start
start: () => {
switch (this.ef) {
case 'rubcu':
// 清除当前item过渡效果
item[this.index].style.transition = 'none';
if (this.length <= 1) return;
// 无限滑动
if (this.loop === true) {
//如果是在第一张图或最后一张
if (this.index === 0) {
this.index = this.length;
} else if (this.index === this.length * 2 - 1) {
this.index = this.length - 1;
}
}
this.elementX = this.index * (-this.elWid);
// 下一个item元素
if (item[this.index + 1]) {
item[this.index + 1].style.transition = 'none';
item[this.index + 1].style.transformOrigin = '0 0';
item[this.index + 1].style.transform = 'rotateY(90deg)';
}
// 上一个item元素
if (item[this.index - 1]) {
item[this.index - 1].style.transition = 'none';
item[this.index - 1].style.transformOrigin = '100% 0';
item[this.index - 1].style.transform = 'rotateY(-90deg)';
}
// 当前item
item[this.index].style.transition = 'none';
item[this.index].style.transform = 'rotateY(0)';
// wrapper移动
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
break;
case 'tsion':
// 无限滑动
if (this.loop === true) {
//如果是在第一张图或最后一张
if (this.index === 0) {
this.index = this.length;
} else if (this.index === this.length * 2 - 1) {
this.index = this.length - 1;
};
this.elementX = this.index * (-this.elWid);
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
}
break;
}
}
}
},
//方向按钮可否点击
isClick: function () {
if (this.length <= 1 || this.loop === true) return;
var swt = this.el.getElementsByClassName('switch')[0],
next = swt.getElementsByClassName('next')[0],
last = swt.getElementsByClassName('last')[0];
// 隐藏、显示按钮
if (this.index === this.length - 1) {
next.classList.add('no-select');
if (last.className.indexOf('no-select') != -1) last.classList.remove('no-select');
} else if (this.index === 0) {
last.classList.add('no-select');
if (next.className.indexOf('no-select') != -1) next.classList.remove('no-select');
} else if (this.index != this.length - 1 && this.index != 0) {
next.classList.remove('no-select');
last.classList.remove('no-select');
}
},
// 方向按钮点击事件
dirBtnClk: function (wrapper) {
var getSwtich = this.el.querySelector('.switch'),//切换按钮父级
last = getSwtich.getElementsByClassName('last')[0],//上一张
next = getSwtich.getElementsByClassName('next')[0],//下一张
clkCls = null,//存储点击的当前按钮calss
item = wrapper.getElementsByClassName('item');//获取item元素
if (this.length <= 1) last.classList.add('no-select'), next.classList.add('no-select');
if (this.loop === false && this.index === 0) last.classList.add('no-select');
// 事件委托
getSwtich.onclick = e => {
wrapper.style.transition = 'all .5s cubic-bezier(.4, 0, .2, 1)';
clkCls = e.target.className;
switch (this.ef) {
// 2d
case 'tsion':
switch (clkCls) {
case 'next':
this.index++;
break;
case 'last':
this.index--;
break;
}
break;
// 3d
case 'rubcu':
switch (clkCls) {
case 'next':
// 当前元素
item[this.index].style.transformOrigin = '100% 0';
// 下一个item元素
item[this.index + 1].style.transformOrigin = '0 0';
// 更新index
this.index++;
setTimeout(() => {
// 当前元素
item[this.index - 1].style.transition = 'all .5s cubic-bezier(.4, 0, .2, 1)';
item[this.index - 1].style.transform = 'rotateY(-90deg)';
}, 50);
break;
case 'last':
// 当前元素
item[this.index].style.transformOrigin = '0 0';
// 上一个元素
item[this.index - 1].style.transformOrigin = '100% 0';
this.index--;
setTimeout(() => {
// 当前元素
item[this.index + 1].style.transition = 'all .5s cubic-bezier(.4, 0, .2, 1)';
item[this.index + 1].style.transform = 'rotateY(90deg)';
}, 50);
break;
};
// 上一个元素
item[this.index].style.transition = 'all .5s cubic-bezier(.4, 0, .2, 1)';
item[this.index].style.transform = 'rotateY(0)';
break;
}
// 更新x轴 ， 移动元素
this.elementX = this.elWid * (-this.index);
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
// 圆点处理
this.tip(this.index % this.length);
// 按钮可否点击
this.isClick();
};
},
// 提示处理
tip: function (index) {
switch (this.tipType) {
case 'vis':
var getTipChil = this.el.querySelectorAll('.prompt div');
for (let i = 0; i < getTipChil.length; i++) {
const element = getTipChil[i];
element.classList.remove('selected');
}
getTipChil[index].classList.add('selected');
break;
case 'num':
this.el.querySelector('#page').innerText = index + 1;
break;
}
},
//滑动
touch: function () {
switch (this.ef) {
// 3d旋转
case 'rubcu':
this.crefs().rubcu();
break;
// 普通
case 'tsion':
this.crefs().tsion();
break;
}
// 首次加载
this.crefs().start();
// 调用按钮事件
this.dirBtnClk(this.el.getElementsByClassName('wrapper')[0]);
},
//渲染函数
render: function (pars) {
// 判断是否传入参数
if (pars) {
// 方向按钮
if (pars.drbtn === true || pars.drbtn === false) {
this.toggDirBtn(pars.drbtn);
} else {
this.toggDirBtn(false);
};
// 效果
if (pars.efect === 'tsion' || pars.efect === 'rubcu' || pars.efect === 'filp') {
this.ef = pars.efect;
};
// 提示类型
if (pars.pkd === 'circle' || pars.pkd === 'square') {
this.tipType = 'vis';
} else if (pars.pkd === 'number') {
this.tipType = 'num';
}
// 提示点
if (pars.pkd === 'circle' || pars.pkd === 'square' || pars.pkd === 'number') {
this.prompt(pars.pkd, pars.tipAlign);
} else {
this.prompt('circle', pars.tipAlign);
};
// 无限滑动
if (pars.loop === true || pars.loop === false) {
this.inslide(pars.loop);
} else {
this.inslide(true);
};
// 是否自动轮播
if (pars.atcr === true || pars.atcr === false) {
if (pars.time && pars.time === Number) this.atcrTime = pars.time;
this.atcr = pars.atcr;
this.autocar(pars.atcr);
} else {
this.autocar(true);
};
} else {
// 默认效果
this.toggDirBtn(false);
this.prompt('circle');
this.inslide(true);
this.ef = 'tsion';
this.autocar(true);
};
//更新item元素
this.el.innerHTML += this.itemHtml;
// 设置元素宽高样式
this.setAttr();
},
//切换按钮
toggDirBtn: function (togg) {
if (this.isPc()) togg = true;
this.itemHtml += `
<div class="switch ${togg === true ? 'block' : 'none'}" >
<div class="last" ></div>
<div class="next" ></div>
</div>
`;
},
//轮播提示
prompt: function (kind, tipAlign) {
switch (kind) {
case "number":
this.itemHtml += `
<div class="prompt prompt-number ${tipAlign === undefined ? 'center' : tipAlign}" >
<span>${this.length} / </span><span id="page">1</span>
</div>
`;
break;
case "square":
case "circle":
var outEl, inEl = '';
//轮播提示
for (let i = 0; i < this.length; i++) {
if (i === 0)
inEl = '<div class="selected" ></div>';
else
inEl += '<div></div>';
};
outEl = `
<div class="prompt prompt-${kind === 'circle' ? 'circle' : 'square'} ${tipAlign === undefined ? 'center' : tipAlign}" >
${inEl}
</div>
`;
this.itemHtml += outEl;
break;
}
},
// 是否无限切换轮播
inslide: function (val) {
if (val && this.length > 1) {
var wrapElem = this.wrapper.innerHTML.concat(this.wrapper.innerHTML);
this.wrapper.innerHTML = wrapElem;
this.loop = true;
} else {
this.loop = false;
}
},
// 自动轮播 time=>轮播间隔
autocar: function (val) {
if (val != true) return;
// 开启定时器前清除原有的定时器，避免开启多个定时器，轮播速度越来越快
clearInterval(this.timer);
// item数量是否满足轮播
if (this.length <= 1) return;
var wrapper = item = null,
dir = "L";//轮播方向
// 轮播类型
switch (this.ef) {
case 'tsion':
// 重复轮播
if (this.loop === true) {
// 开启定时器
this.timer = setInterval(() => {
// 获取wrapper轮播元素
wrapper = this.el.getElementsByClassName('wrapper')[0];
// 最后一张
if (this.index === this.length * 2 - 1) {
// 清除动画效果
wrapper.style.transition = '0s';
// 更新index
this.index = this.length - 1;
// 元素移动位置
this.elementX = -this.elWid * this.index;
// 开始轮播
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
}
// 延迟50毫秒，避免出现运行到最后一张时，返回第一组最后一张图产生过渡效果
setTimeout(() => {
// 更新index
this.index++;
// 更新元素移动位置
this.elementX = -this.elWid * this.index;
// 开启动画效果
wrapper.style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
// 开始轮播
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
// 圆点处理
this.tip(this.index % this.length);
}, 50)
}, this.atcrTime);
} else {
// 开启定时器
this.timer = setInterval(() => {
// 获取wrapper轮播元素
wrapper = this.el.getElementsByClassName('wrapper')[0];
// 第一张或最后一张
if (this.index === 0) {
dir = "L";
} else if (this.index === this.length - 1) {
dir = "R";
}
// 更新index
dir === "L" ? this.index++ : this.index--;
// 更新元素移动位置
this.elementX = -this.elWid * this.index;
// 开启动画效果
wrapper.style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
// 开始轮播
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
// 圆点处理
this.tip(this.index % this.length);
// 按钮可否点击
this.isClick();
}, this.atcrTime);
}
break;
case 'rubcu':
// 重复轮播
if (this.loop === true) {
// 开启定时器
this.timer = setInterval(() => {
// 获取wrapper轮播元素
wrapper = this.el.getElementsByClassName('wrapper')[0],
item = wrapper.getElementsByClassName('item');
// 最后一张
if (this.index === this.length * 2 - 1) {
// 清除动画效果
wrapper.style.transition = 'none';
// 更新index
this.index = this.length - 1;
// 元素移动位置
this.elementX = -this.elWid * this.index;
// 开始轮播
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
}
// 当前item
item[this.index].style.transition = 'none';
item[this.index].style.transformOrigin = '100% 0';
item[this.index].style.transform = 'rotateY(0)';
// 下一个item元素
if (item[this.index + 1]) {
item[this.index + 1].style.transition = 'none';
item[this.index + 1].style.transformOrigin = '0 0';
item[this.index + 1].style.transform = 'rotateY(90deg)';
}
// 延迟50毫秒，避免出现运行到最后一张时，返回第一组最后一张图产生过渡效果
setTimeout(() => {
// 更新index
this.index++;
// 当前元素
if (item[this.index - 1]) {
item[this.index - 1].style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
item[this.index - 1].style.transform = 'rotateY(-90deg)';
}
// 下一个元素
if (item[this.index]) {
item[this.index].style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
item[this.index].style.transform = 'rotateY(0)';
}
// 更新元素移动位置
this.elementX = -this.elWid * this.index;
// 动画过渡
wrapper.style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
// 开始轮播
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
// 圆点处理
this.tip(this.index % this.length);
}, 50)
}, this.atcrTime);
} else {
// 开启定时器
this.timer = setInterval(() => {
// 获取wrapper轮播元素
wrapper = this.el.getElementsByClassName('wrapper')[0],
item = wrapper.getElementsByClassName('item');
// 如果是第一张
if (this.index === 0) {
dir = 'L';
// 最后一张
} else if (this.index === this.length - 1) {
dir = 'R';
}
// 改变item
if (dir === 'L') {
// 当前元素
item[this.index].style.transition = 'none';
item[this.index].style.transformOrigin = '100% 0';
item[this.index].style.transform = 'rotateY(0)';
// 下一个item元素
item[this.index + 1].style.transition = 'none';
item[this.index + 1].style.transformOrigin = '0 0';
item[this.index + 1].style.transform = 'rotateY(90deg)';
this.index++;
// 上一个item元素
} else if (dir === 'R') {
// 当前元素
item[this.index].style.transition = 'none';
item[this.index].style.transformOrigin = '0 0';
item[this.index].style.transform = 'rotateY(0)';
// 上一个元素
item[this.index - 1].style.transition = 'none';
item[this.index - 1].style.transformOrigin = '100% 0';
item[this.index - 1].style.transform = 'rotateY(-90deg)';
this.index--;
}
// 延迟50毫秒，避免出现运行到最后一张时，返回第一组最后一张图产生过渡效果
setTimeout(() => {
if (dir === "L") {
// 下一个元素
item[this.index].style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
item[this.index].style.transform = 'rotateY(0)';
// 当前元素
item[this.index - 1].style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
item[this.index - 1].style.transform = 'rotateY(-90deg)';
} else if (dir === "R") {
// 当前元素
item[this.index + 1].style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
item[this.index + 1].style.transform = 'rotateY(90deg)';
// 上一个元素
item[this.index].style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
item[this.index].style.transform = 'rotateY(0)';
}
// 更新元素移动位置
this.elementX = -this.elWid * this.index;
// 动画过渡
wrapper.style.transition = 'all 1s cubic-bezier(.4, 0, .2, 1)';
// 开始轮播
wrapper.style.transform = "translate3d(" + this.elementX + "px,0,0) scale3d(1,1,1) rotate3d(0,0,0,0)";
// 圆点处理
this.tip(this.index % this.length);
// 按钮可否点击
this.isClick();
}, 50);
}, this.atcrTime);
}
break;
}
},
// 设置元素属性
setAttr: function () {
var wrapper = this.el.getElementsByClassName('wrapper')[0],
item = wrapper.getElementsByClassName('item'), i = 0, element = null;
// 设置3D视觉
if (this.ef === 'rubcu') {
this.el.style.perspective = '50rem';
wrapper.style.transformStyle = 'preserve-3d';
}
if (this.ef === 'rubcu' || this.ef === 'tsion') {
// 设置定位
for (i = 0; i < item.length; i++) {
element = item[i];
element.style.width = this.elWid + 'px';
element.style.float = 'left';
}
// 设置wrapper宽度
this.loop === true ? wrapper.style.width = this.elWid * (this.length * 2) + 'px' : wrapper.style.width = this.elWid * this.length + 'px';
}
},
//判断是否是PC设备，true是，false不是
isPc: function () {
var userAgentInfo = navigator.userAgent,
Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPod'],
flag = true;
for (let i = 0; i < Agents.length; i++) {
if (userAgentInfo.indexOf(Agents[i]) > 0) {
flag = false;
break;
}
}
if (window.screen.width >= 768) {
flag = true;
}
return flag;
},
//初始化方法
init: function () {
// 为el添加calss
this.el.classList.add('slide');
// 获取参数
this.params();
//调用手指滑动
this.touch();
}
};
window.Slide = Slide;
})(window, document)
</script>
<!-- 使用 -->
<script type="text/javascript">
window.onload = function () {
// 默认效果
var slide1 = new Slide(".slide1"),
// 3D非无限轮播，显示按钮效果
slide4 = new Slide(".slide2", {
drbtn: true,
loop: false,
atcr: true,
pkd: 'square',
efect: 'rubcu',
time: 1000,
tipAlign: 'right'
});
// 无轮播，显示按钮效果
slide3 = new Slide(".slide3", {
efect: 'rubcu',
drbtn: true,
atcr: false,
pkd: 'number'
});
}
/**
1. drbtn 是否显示按钮，默认不显示，值：boolean(布尔值) [true,false]，true显示，false不显示。
2. loop 是否无限滑动， 默认无限滑动，值：boolean(布尔值) [true,false]，true无限滑动，false非无限滑动。
3. atcr 是否自动轮播，默认自动轮播 值：boolean(布尔值) [true,false]，true自动轮播，false不轮播。
4. efect 效果，默认平移效果 值：string(字符串) ['tsion 平移','rubcu 3D旋转']
5. time 轮播时间间隔， 值：number(布尔值)，默认3000毫秒。
6. tipAlign 轮播提示对齐方向， 默认居中(center) 值：string(字符串） ['left' 居左,'center' 居中,'right' 居右]。
7. pkd 轮播提示样式，默认圆形提示(circle), 值：strig(字符串),['square' 方形, 'circle' 圆形,'number' 数字]。
例如：
new Slide('solide', {
drbtn: true,//是否显示按钮，默认不显示，值
loop: false,//是否可以无限滑动，默认无限滑动
atcr: true,//是否自动轮播，默认自动轮播
pkd: 'square',//轮播提示样式
efect: 'rubcu',//效果
time: 1000,//轮播间隔
tipAlign: 'right',//轮播提示位置
pkd:'number'
});
*/
</script>
</body>
</html>
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
