原生H5，JS，实现MySwiper轮播，无其他框架，内容自定义，元素自定义，样式自定义，轮播方向，盒子大小自适配
学习简单，代码明了，结构简洁，初级，中级都可以参考参考
完整代码：https://download.csdn.net/download/qiziyiming/86769551
前端经验积累干货
/**
*
* var swipers=swiperInitil({
* selector:'', //元素选择器
* activity: 0, //默认选中下标
* loop:true, //循环轮播
* duration: 600, //切换动画时间
* autoTime: 0, //自动轮播时间
* direction: true, //自动轮播方向
* swiperBtns:false, //切换按钮，自动适配
* style:{},
* itemStyle:{},
* swiperBtns:{
* prev:'',
* next:'',
* size:null,
* }
* pagination:false, //轮播指示器，主动适配
* pagination:{
style:{
opacity:'0.7'
},
activityStyle:{
'background-color':'#f00'
}
},
* containerInfo:false //自动生成元素
* containerInfo:{
* list:[],
* getNode(item,index,info){},
* getItemStyle(item,index,info){}
* }
*
*
* });
*
*/
function swiperInitil(info) {
info = Object.assign({
selector:'', //元素选择器
activity: 0, //默认选中下标
loop:true, //循环轮播
duration: 600, //切换动画时间
autoTime: 0, //自动轮播时间
direction: true, //自动轮播方向
swiperBtns:false, //切换按钮，自动适配
pagination:false, //轮播指示器，主动适配
width:false,
height:false,
style:{},
itemStyle:{},
containerInfo:false,
}, info);
function Factory(swiperInfo, domItem, index) {
var lockActivity = false;
var lockActivityNode = false;
var focusActivity = false;
var isRestoreActivity = false;
var isAuto=true;
var swiperViewDom = null;
var swiperItemsDom = null;
var swiperItemsDom_back = null;
var swiperPrevDom=null;
var swiperNextDom=null;
var itemLength = 0;
var swiperIndex = 0;
var activity = 0;
var swiperPaginationDomItems=[];
function initil() {
initilDom();
setSwiperActivity(swiperIndex = swiperInfo.activity, 0, false);
isAuto=swiperInfo.autoTime > 0;
if (isAuto) {
if (swiperInfo.direction===false)
swiperIndex=itemLength-swiperInfo.activity;
var swiperInterbalVal = setInterval(function() {
if (lockActivity) return;
if (focusActivity) {
focusActivity = !focusActivity;
return;
}
if (swiperInfo.direction)
setSwiperActivity(swiperIndex += 1);
else
setSwiperActivity((itemLength) - ((swiperIndex += 1) % (itemLength)));
}, swiperInfo.autoTime);
}
}
function initilDom(){
setStyle(domItem,swiperInfo.style);
if(swiperInfo.containerInfo !== false){
swiperInfo.containerInfo=Object.assign({
list:[],
getNode(item,index,info){
return item||false;
},
getItemStyle(item,index,info){
return {};
}
},swiperInfo.containerInfo);
setContainerNode();
}else{
swiperViewDom = domItem.querySelector('.swiperView');
swiperItemsDom = swiperViewDom.querySelectorAll('.swiperItem');
swiperItemsDom.forEach(function(itemdom){
setStyle(itemdom,swiperInfo.itemStyle);
});
}
itemLength = swiperItemsDom.length;
swiperItemsDom_back=Array.from(swiperItemsDom);
var deviation=0;
if(swiperInfo.loop){
deviation=1;
var dom_=swiperItemsDom[0].cloneNode(true);
swiperViewDom.appendChild(dom_);
swiperItemsDom_back.push(dom_);
dom_=swiperItemsDom[swiperItemsDom.length - 1].cloneNode(true);
swiperViewDom.insertBefore(dom_, swiperItemsDom[0]);
swiperItemsDom_back.unshift(dom_);
}
swiperViewDom.style.transform = "translate3d(-" + (activity + deviation) + "00%, 0px, 0px)";
swiperPrevDom = domItem.querySelector('.swiperBtns>.swiperPrev');
swiperNextDom = domItem.querySelector('.swiperBtns>.swiperNext');
if(swiperPrevDom && swiperNextDom){
initilSwiperBtns();
}else if(swiperInfo.swiperBtns !== false){
createSwiperBtnsDom();
initilSwiperBtns();
}
setSwiperPagination();
}
function setContainerNode(){
var list=swiperInfo.containerInfo.list;
addClass(domItem,'swiperContainer');
swiperViewDom = domItem.querySelector('.swiperView');
if(!swiperViewDom){
swiperViewDom=document.createElement("div");
addClass(swiperViewDom,'swiperView');
domItem.appendChild(swiperViewDom);
}
swiperItemsDom = swiperViewDom.querySelectorAll('.swiperItem');
var addlength=0;
if(list.length>swiperItemsDom.length){
addlength=list.length-swiperItemsDom.length;
createElementItemsDom(addlength);
}
swiperItemsDom.forEach(function(item,index){
var itemInfo=swiperInfo.containerInfo.list[index];
var val=swiperInfo.containerInfo.getNode(itemInfo,index,swiperInfo.containerInfo);
if(val!==false){
item.innerHTML=val;
}
setStyle(item,swiperInfo.itemStyle);
setStyle(item,swiperInfo.containerInfo.getItemStyle(itemInfo,index,swiperInfo.containerInfo));
});
}
function createElementItemsDom(length){
if(!swiperItemsDom){
swiperItemsDom=[];
}
swiperItemsDom=Array.from(swiperItemsDom);
for(var i=0;i<length;i++){
var swiperItem=document.createElement("div");
addClass(swiperItem,'swiperItem');
swiperViewDom.appendChild(swiperItem);
swiperItemsDom[i]=swiperItem;
}
}
function setSwiperPagination(){
if(swiperInfo.pagination===false){
return ;
}else if(swiperInfo.pagination===true){
swiperInfo.pagination={
style:{},
activityStyle:{},
}
}
swiperPaginationDomItems = domItem.querySelectorAll('.swiperPagination>div');
if(!(swiperPaginationDomItems && swiperPaginationDomItems.length>0)){
swiperPaginationDomItems=[];
var swiperPaginationDom=domItem.querySelector('.swiperPagination');
if(!swiperPaginationDom){
swiperPaginationDom = document.createElement("div");
domItem.appendChild(swiperPaginationDom);
addClass(swiperPaginationDom,'swiperPagination');
}
for(var i=0;i<itemLength;i++){
var dom_=document.createElement("div");
swiperPaginationDomItems.push(dom_);
swiperPaginationDom.appendChild(dom_);
}
}
swiperPaginationDomItems.forEach(function(item,index){
item.setAttribute("data-index",index);
setStyle(item,swiperInfo.pagination.style);
item.onclick=setPaginationClick;
});
}
function setPaginationClick(e){
var index=Number(e.target.getAttribute("data-index"));
setActivity(index);
}
var paginationActivityDom=null;
function addPaginationActivity(){
if(swiperPaginationDomItems.length<1){
return ;
}
if(paginationActivityDom){
removeClass(paginationActivityDom,CLASSNAME);
removeStyle(paginationActivityDom,swiperInfo.pagination.activityStyle);
}
paginationActivityDom=swiperPaginationDomItems[activity];
addClass(paginationActivityDom,CLASSNAME);
addStyle(paginationActivityDom,swiperInfo.pagination.activityStyle);
}
function createSwiperBtnsDom(){
var swiperBtns = document.createElement("div");
addClass(swiperBtns,'swiperBtns');
swiperPrevDom = document.createElement("div");
addClass(swiperPrevDom,'swiperPrev');
swiperNextDom = document.createElement("div");
addClass(swiperNextDom,'swiperNext');
swiperBtns.appendChild(swiperPrevDom);
swiperBtns.appendChild(swiperNextDom);
domItem.appendChild(swiperBtns);
}
function initilSwiperBtns(){
if(swiperInfo.swiperBtns === false || swiperInfo.swiperBtns === true){
swiperInfo.swiperBtns = {
_swiperBtns_type:false,
prev:'',
next:''
};
}else {
swiperInfo.swiperBtns = Object.assign({
_swiperBtns_type:true,
prev:'',
next:''
}, swiperInfo.swiperBtns);
}
var isSize_=false;
if(swiperInfo.swiperBtns._swiperBtns_type){
if(isStrImg(swiperInfo.swiperBtns.prev)){
swiperPrevDom.innerHTML='<img src="'+swiperInfo.swiperBtns.prev+'"/>';
swiperNextDom.innerHTML='<img src="'+swiperInfo.swiperBtns.next+'"/>';
addClass(swiperPrevDom,'swiperImg');
addClass(swiperNextDom,'swiperImg');
}else if(isEmpty(swiperInfo.swiperBtns.prev)){
swiperPrevDom.innerHTML=swiperInfo.swiperBtns.prev;
swiperNextDom.innerHTML=swiperInfo.swiperBtns.next;
}else{
addClass(swiperPrevDom,'swiperBtn');
addClass(swiperNextDom,'swiperBtn');
}
}else if(!isEmpty(swiperPrevDom.innerHTML)){
addClass(swiperPrevDom,'swiperBtn');
addClass(swiperNextDom,'swiperBtn');
}
if('size' in swiperInfo.swiperBtns && swiperInfo.swiperBtns.size>0){
setSwiperBtnDomSize(swiperInfo.swiperBtns.size);
}
swiperPrevDom.onclick=setPrev;
swiperNextDom.onclick=setNext;
}
function setSwiperBtnDomSize(size){
swiperPrevDom.style.width=size+'px';
swiperPrevDom.style.height=size+'px';
swiperNextDom.style.width=size+'px';
swiperNextDom.style.height=size+'px';
}
/**
* 复位自动轮播下标
*/
function restoreAutoSwiperIndex(){
if(!isAuto) return;
if (swiperInfo.direction){
swiperIndex=activity;
}else{
swiperIndex=itemLength-activity;
}
}
/**
* 循环轮播两端复位
* @param {*} index
*/
function restoreActivity(index) {
setTimeout(function() {
if(swiperInfo.loop){
if (isRestoreActivity) {
setTranslate3d(activity + 1, 0);
}
addClass_back(swiperItemsDom[activity],true);
}
setEventActivity();
}, swiperInfo.duration);
}
function setSwiperActivity(index = 0, duration, direction = true) {
isRestoreActivity = false;
lockActivityNode = true;
if (index < 0) {
index = Math.abs(index);
index = itemLength - (index % itemLength);
}
var deviation = 0;
/**
* 循环轮播两端操作
*/
if(swiperInfo.loop){
deviation=1;
/**
* 判断轮播数少于3个时处理
*/
var isLength = itemLength > 2;
if ((!direction || isLength) && activity == 0 && (index % itemLength == (itemLength - 1))) {
deviation = (index % itemLength) * -1; //activity+deviation=0
isRestoreActivity = true;
} else if ((direction || isLength) && activity == (itemLength - 1) && (index % itemLength == 0)) {
deviation = itemLength + 1; //activity+deviation=itemLength+1
isRestoreActivity = true;
}
}
activity = index % itemLength;
addClass_back(swiperItemsDom_back[activity + deviation],false);
addClass_back(swiperItemsDom[activity],false);
setTranslate3d(activity + deviation, duration);
addPaginationActivity();
restoreActivity();
}
var tem_addClass_Dom=[];
var CLASSNAME="activity";
function addClass_back(dom_,isRemove){
if(isRemove){
tem_addClass_Dom.forEach(function(itemDom){
removeClass(itemDom,CLASSNAME);
});
tem_addClass_Dom.splice(0);
}
tem_addClass_Dom.push(dom_);
addClass(dom_,CLASSNAME);
}
/**
* 动画时间
* @param {*} duration
*/
function setDuration(duration = swiperInfo.duration) {
swiperViewDom.style.transitionDuration = duration + "ms";
}
function setTranslate3d(val, duration) {
setDuration(duration);
swiperViewDom.style.transform = "translate3d(" + (-100 * val) + "%, 0px, 0px)";
}
var callbackVal;
/**
* @param {Object} callback 事件托管 切换过程中可托管一次
*/
function callbackActivity(callback) {
if (!lockActivityNode) {
callback();
} else {
callbackVal = null;
callbackVal = callback;
}
}
/**
* 切换轮播
* @param {*} index
* @param {*} duration 切换动画时间
* @param {*} direction 循环轮播，如果是两端时移动的方向
*/
function setActivity(index, duration, direction) {
if (lockActivityNode) {
return;
}
callbackActivity(function() {
lockActivity = true;
focusActivity = true;
setSwiperActivity(index, duration, direction);
restoreAutoSwiperIndex();
});
}
function setPrev() {
if(!swiperInfo.loop && activity<1){
return ;
}
setActivity(activity - 1, swiperInfo.duration, false);
}
function setNext(duration) {
if(!swiperInfo.loop && activity>=itemLength-1){
return ;
}
setActivity(activity + 1, swiperInfo.duration, true);
}
var eventActivitys = [];
/**
* 添加轮播切换事件，切换后触发
* @param {*} callback
*/
function addEventActivity(callback) {
eventActivitys.push(callback);
}
function setEventActivity() {
lockActivity = false;
lockActivityNode = false;
try {
eventActivitys.forEach(function(callback) {
callback(activity);
});
} catch (e) {
console.error(e);
}
if (callbackVal) {
callbackVal();
callbackVal = null;
}
}
initil();
return {
data: swiperInfo,
selector: swiperInfo.selector,
id: (swipers_uuid++)+'-'+index,
length: itemLength,
activity: activity,
setActivity,
setPrev,
setNext,
addEventActivity,
dom:{
swiperContainer:domItem,
swiperView:swiperViewDom,
swiperItems:swiperItemsDom,
swiperPrev:swiperPrevDom,
swiperNext:swiperNextDom,
swiperPagination:swiperPaginationDomItems,
}
};
};
var swipers = [];
var docs = Array.from(document.querySelectorAll(info.selector));
docs.forEach(function(domItem, index) {
try{
swipers.push(new Factory(Object.assign(info,{}), domItem, index));
}catch(e){
console.error(e);
}
});
return swipers;
}
var swipers_uuid=0;
function removeStyle(dom,style){
var _dfstyle=dom._dfstyle||{};
for(var attr in _dfstyle){
dom.style[attr]=_dfstyle[attr];
}
}
function addStyle(dom,style){
var _dfstyle={};
for(var attr in style){
_dfstyle[attr]=dom.style[attr];
dom.style[attr]=style[attr];
}
dom._dfstyle=_dfstyle;
}
function setStyle(dom,style){
for(var attr in style){
dom.style[attr]=style[attr];
}
}
function isEmpty(str) {
return str && str.length > 0
}
function isStrImg(str){
return isEmpty(str) && (str.indexOf("/")>=0 || str.indexOf(".")>=0);
}
/**
* 数组查重
*/
function isArraySelectVal(list, val) {
// if (!isEmpty(val)) {
// return false;
// }
for (var item of list) {
if (item == val) {
return false;
}
}
return true;
}
/**
* 数组添加，并查重
* @param {Object} list
* @param {Object} val
*/
function addArray(list, val) {
if (isEmpty(val) && isArraySelectVal(list, val)) {
list.push(val);
}
return list;
}
/**
* 数组删除一个
*/
function removeArray(list, val) {
var list_ = [];
list.forEach(function(item) {
if (item != val) {
list_.push(item);
}
});
return list_;
}
/**
* class样式添加
*/
function addClass(dom, className) {
var classVal = dom.getAttribute("class");
if(isEmpty(classVal)){
var classlist = classVal.split(" ");
classlist = addArray(classlist, className);
dom.setAttribute("class", classlist.join(" "));
}else{
dom.setAttribute("class", className);
}
}
/**
* class样式删除
*/
function removeClass(dom, className) {
var classVal = dom.getAttribute("class");
if(isEmpty(classVal)){
var classlist = classVal.split(" ");
classlist = removeArray(classlist, className);
dom.setAttribute("class", classlist.join(" "));
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MySwiper</title>
<link rel="stylesheet" href="css/swiper.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/util.css" />
<script type="application/javascript" src="js/swiper.js"></script>
</head>
<body style="background-color: #CCCCCC;">
<div class=" all flex_column align_items">
<div class="myswiperTestNode"></div>
<div class="myswiperTestNodeTow"></div>
<div class="myswiperTestNodeTow2"></div>
<div class="swiperContainer myswipers" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView h1">
<div class="swiperItem bgred" style="background-color: #66CCCC;">只有我一个</div>
</div>
<div class="all local absolute no_pointer align_items space_between white zindex1k">
<div onclick="swiperInfos[0].setPrev()" class="pointer cursor_pointer on_select">我是自定义Prev</div>
<div onclick="swiperInfos[0].setNext()" class="pointer cursor_pointer on_select">我是自定义Next</div>
</div>
</div>
<div class="swiperContainer myswipers" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView h1">
<div class="swiperItem bgred" style="background-color: #99CC33;">我是一个</div>
<div class="swiperItem bgyellow" style="background-color: #FF6600;">我是二个</div>
</div>
<div class="swiperBtns" style="color: white;">
<div class="swiperPrev">Prev</div>
<div class="swiperNext">Next</div>
</div>
</div>
<div class="swiperContainer myswipers" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView h1">
<div class="swiperItem bgred" style="background-color: #FF9900;">1</div>
<div class="swiperItem bgyellow" style="background-color: #CCFF00;">2</div>
<div class="swiperItem bgred" style="background-color: #CC3399;">3</div>
</div>
<div class="swiperBtns">
<div class="swiperPrev swiperBtn"></div>
<div class="swiperNext swiperBtn"></div>
</div>
</div>
<div class="swiperContainer myswiper1" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView h1">
<div class="swiperItem bgred" style="background-color: #66CCCC;">1</div>
<div class="swiperItem bgyellow" style="background-color: #CCFF66;">2</div>
<div class="swiperItem bgblue" style="background-color: #FF99CC;">3</div>
</div>
<div class="swiperBtns">
<div class="swiperPrev swiperImg">
<img src="./img/prev.png"/>
</div>
<div class="swiperNext swiperImg">
<img src="./img/next.png"/>
</div>
</div>
</div>
<style>
.myswiper2>.swiperPagination>div{
width: 20px;
height: 20px;
color: #fff;
}
.myswiper2>.swiperPagination>div.activity{
color: #000;
}
</style>
<div class="swiperContainer myswiper2" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView ">
<div class="swiperItem bgred" style="background-color: #666699;">反方向轮播：1</div>
<div class="swiperItem bgyellow" style="background-color: #FF9999;">反方向轮播：2</div>
<div class="swiperItem bgblue" style="background-color: #99CC33;">反方向轮播：3</div>
<div class="swiperItem bgyellow" style="background-color: #FF9900;">反方向轮播：4</div>
<div class="swiperItem bgblue" style="background-color: #FFCC00;">反方向轮播：5</div>
</div>
<div class="swiperPagination">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
<div class="swiperContainer myswiper2" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView ">
<div class="swiperItem bgred" style="background-color: #66CCCC;">反方向轮播：1</div>
<div class="swiperItem bgyellow" style="background-color: #CCFF66;">反方向轮播：2</div>
<div class="swiperItem bgblue" style="background-color: #FF99CC;">反方向轮播：3</div>
<div class="swiperItem bgyellow" style="background-color: #FF9999;">反方向轮播：4</div>
<div class="swiperItem bgblue" style="background-color: #FFCC99;">反方向轮播：5</div>
</div>
</div>
<div class="swiperContainer myswiper2" style="width: 60%;height: 150px;color: #fff;">
<ol class="swiperView ">
<li class="swiperItem bgred" style="background-color: #0099CC;">反方向轮播：1</li>
<li class="swiperItem bgyellow" style="background-color: #CCCCCC;">反方向轮播：2</li>
<li class="swiperItem bgblue" style="background-color: #FF6666;">反方向轮播：3</li>
<li class="swiperItem bgyellow" style="background-color: #FF6600;">反方向轮播：4</li>
<li class="swiperItem bgblue" style="background-color: #009966;">反方向轮播：5</li>
</ol>
</div>
<style>
.mySwiperBtns1 .activity{
color: #fff;
}
</style>
<div class="swiperContainer mySwiperBtns1" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView">
<div class="swiperItem bgred" style="background-color: #99CC33;">反方向轮播：mySwiper1</div>
<div class="swiperItem bgyellow" style="background-color: #FF6666;">反方向轮播：mySwiper2</div>
<div class="swiperItem bgred" style="background-color: #336699;">反方向轮播：mySwiper3</div>
</div>
</div>
<div class="swiperContainer mySwiperBtns2" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView h1">
<div class="swiperItem bgred" style="background-color: #99CC33;">1</div>
<div class="swiperItem bgyellow" style="background-color: #0099CC;">2</div>
</div>
</div>
<div class="swiperContainer mySwiperBtns3" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView h1">
<div class="swiperItem bgred" style="background-color: #66CCCC;">1</div>
<div class="swiperItem bgyellow" style="background-color: #CCFF66;">2</div>
<div class="swiperItem bgblue" style="background-color: #FF99CC;">3</div>
</div>
<div class="swiperPagination"></div>
</div>
<div class="swiperContainer mySwiperBtns4" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView h1">
<div class="swiperItem bgred" style="background-color: #339933;">不循环,我的字体一大一小1</div>
<div class="swiperItem bgyellow" style="background-color: #FFCC33;">不循环,我的字体一大一小2</div>
<div class="swiperItem bgblue" style="background-color: #336699;">不循环,我的字体一大一小3</div>
<div class="swiperItem bgyellow" style="background-color: #FFCC33;">不循环,我的字体一大一小4</div>
</div>
</div>
<div class="swiperContainer mySwiperBtns4" style="width: 60%;height: 150px;color: #fff;">
<ul class="swiperView h1">
<li class="swiperItem bgred" style="background-color: #33CC99;">不循环滚动1</li>
<li class="swiperItem bgyellow" style="background-color: #FFFF00;">不循环滚动2</li>
<li class="swiperItem bgblue" style="background-color: #336699;">不循环滚动3</li>
<li class="swiperItem bgyellow" style="background-color: #99CC33;">不循环滚动4</li>
<li class="swiperItem bgblue" style="background-color: #0099CC;">不循环滚动5</li>
</ul>
</div>
<div class="swiperContainer mySwiperBtns5" style="width: 60%;height: 150px;color: #fff;">
<div class="swiperView h1">
<div class="swiperItem bgred" style="background-color: #CC3399;">1</div>
<div class="swiperItem bgyellow" style="background-color: #FFCC99;">2</div>
<div class="swiperItem bgblue" style="background-color: #FF6666;">3</div>
</div>
<div class="swiperBtns">
<div class="swiperPrev swiperImg">
<img src="./img/prev.png"/>
</div>
<div class="swiperNext swiperImg">
<img src="./img/next.png"/>
</div>
</div>
</div>
<script>
/**
*
* var swipers=swiperInitil({
* selector:'', //元素选择器
* activity: 0, //默认选中下标
* loop:true, //循环轮播
* duration: 600, //切换动画时间
* autoTime: 0, //自动轮播时间
* direction: true, //自动轮播方向
* swiperBtns:false, //切换按钮，自动适配
* style:{},
* itemStyle:{},
* swiperBtns:{
* prev:'',
* next:'',
* size:null,
* }
* pagination:false, //轮播指示器，主动适配
* pagination:{
style:{
opacity:'0.7'
},
activityStyle:{
'background-color':'#f00'
}
},
* containerInfo:false //自动生成元素
* containerInfo:{
* list:[],
* getNode(item,index,info){},
* getItemStyle(item,index,info){}
* }
*
*
* });
*
*/
swiperInitil({
selector:'.myswiperTestNode', //元素选择器
activity: 0, //默认选中下标
loop:true, //循环轮播
duration: 600, //切换动画时间
style:{
width:'100%',
height:'200px',
},
itemStyle:{},
autoTime: 2000, //自动轮播时间
direction: true, //自动轮播方向
swiperBtns:true, //切换按钮，自动适配
pagination:true, //轮播指示器，主动适配
containerInfo:{
list:['https://img.tukuppt.com/photo-big/00/35/69/5a430a99d936a.jpg',
'https://img.tukuppt.com/photo-big/00/11/28/6195082e422f56324.jpg',
'https://img.tukuppt.com/photo-big/00/11/28/61950840aed749971.jpg',
'https://img.tukuppt.com/photo-big/00/12/14/6194bcff5e0d31306.jpg',
'https://img.tukuppt.com/photo-big/00/12/84/5a5ad9fc4bf02.jpg'],
getNode(item,index,info){
return '<img src="'+item+'"/>';
}
}
});
swiperInitil({
selector:'.myswiperTestNodeTow', //元素选择器
activity: 3, //默认选中下标
loop:true, //循环轮播
duration: 600, //切换动画时间
style:{
width:'60%',
height:'200px',
},
itemStyle:{
color:"#f00"
},
autoTime: 2000, //自动轮播时间
direction: true, //自动轮播方向
pagination:{
style:{
opacity:'0.3',
'background-color':'#3399CC'
},
activityStyle:{
opacity:'1',
'background-color':'#0099FF'
}
}, //轮播指示器，主动适配
swiperBtns:{
prev:'上一个',
next:'下一个'
},
containerInfo:{
list:['我自定义内容一',
'我自定义内容二',
'我自定义内容三',
'我自定义内容四',
'我自定义内容五'],
getNode(item,index,info){
return '<h3>'+item+'</h3>';
}
}
});
swiperInitil({
selector:'.myswiperTestNodeTow2', //元素选择器
activity: 3, //默认选中下标
loop:true, //循环轮播
duration: 600, //切换动画时间
style:{
width:'60%',
height:'200px',
},
itemStyle:{
color:"#FF33CC",
'font-size': '40px'
},
autoTime: 2000, //自动轮播时间
direction: true, //自动轮播方向
pagination:{
style:{
opacity:'1',
'background-color':'#99CCFF'
},
activityStyle:{
opacity:'1',
'background-color':'#66CCFF'
}
}, //轮播指示器，主动适配
swiperBtns:{
prev:'上一个',
next:'下一个'
},
containerInfo:{
list:['','','','','','','','','','',''],
getItemStyle(item,index,info){
// if(index%2==0){
// return {'font-size': '40px'}
// }else{
// return {'font-size': '20px'}
// }
switch(index){
case 2:;
case 4:;
case 6:;
case 8:;
// case 2:return {'background-color':'#FF9999',color:'#0099CC'};
// case 4:return {'background-color':'#006699',color:'#0099CC'};
// case 6:return {'background-color':'#009966',color:'#0099CC'};
// case 8:return {'background-color':'#FFCCCC',color:'#0099CC'};
case 10:return {'background-color':'#FF99CC',color:'#fff'};
default : return {'background-color':'#66CCFF',color:'#0099CC'};
}
},
getNode(item,index,info){
return '<h3>我的内容自动生成'+index+'</h3>';
}
}
});
var swiperInfos = swiperInitil({
selector: '.myswipers',
// duration:3000,
console: true,
});
swiperInfos[0].addEventActivity(function(index) {
// console.log('myswiper:'+index);
});
swiperInitil({
selector: '.myswiper1',
activity: 1,
autoTime: 3500,
});
swiperInitil({
selector: '.myswiper2',
activity: 3,
duration: 600,
autoTime: 2500,
direction: false,
pagination:true,
});
swiperInitil({
selector: '.mySwiperBtns1',
activity: 3,
duration: 600,
autoTime: 2000,
direction: false,
swiperBtns:true
});
swiperInitil({
selector: '.mySwiperBtns2',
activity: 3,
duration: 600,
autoTime: 3500,
swiperBtns:{
prev:'上一个',
next:'下一个'
}
});
swiperInitil({
selector: '.mySwiperBtns3',
activity: 1,
duration: 600,
autoTime: 3200,
itemStyle:{
color:'#0099FF',
},
direction: true,
pagination:true,
swiperBtns:{
// prev:'上一个',
// next:'下一个'
}
});
swiperInitil({
selector: '.mySwiperBtns4',
activity: 2,
loop:false,
duration: 600,
autoTime: 1800,
pagination:true,
swiperBtns:{
prev:'./img/prev.png',
next:'./img/next.png'
},
containerInfo:{
getItemStyle(item,index,info){
if(index%2==0){
return {'font-size': '40px'}
}else{
return {'font-size': '20px'}
}
}
}
});
swiperInitil({
selector: '.mySwiperBtns5',
duration: 600,
autoTime: 2700,
swiperBtns:{
size:30,
prev:'./img/prev.png',
next:'./img/next.png'
}
});
</script>
</div>
</body>
</html>
完整代码：https://download.csdn.net/download/qiziyiming/86769551
Demo视频预览
2022.10.16-17.57.02
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
