islider.js轮播图
发布日期:2021-08-13 07:45:07 浏览次数:5 分类:技术文章

本文共 16968 字,大约阅读时间需要 56 分钟。

 本篇文章地址:https://www.cnblogs.com/Thehorse/p/11601032.html

css

#iSlider-effect-wrapper {

height: 220px;
width: 100%;
margin: 0 auto;
margin-top: 0.2rem;
overflow: hidden;
position: relative;
}
.iSlider-effect ul{
list-style: none;
padding: 0;
margin: 0;
height: 205%;
overflow: hidden
}
.iSlider-effect li {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
list-style: none
}

 

js

 

/**

* iSlider
* A simple, efficent mobile slider
* @Author BEFE
*
* @param {Object} opts 参数集
* @param {Element} opts.dom 外层元素 Outer wrapper
* @param {Object} opts.data 数据列表 Content data
* Please refer to README 请参考README
* @class
*/

'use strict';

var iSlider = function (opts) {

if (!opts.dom) {
throw new Error('dom element can not be empty!');
}

if (!opts.data || !opts.data.length) {

throw new Error('data must be an array and must have more than one element!');
}

this._opts = opts;

this._setting();
this._renderHTML();
this._bindHandler();
};

// setting parameters for slider

iSlider.prototype._setting = function () {
var opts = this._opts;

// dom element wrapping content

this.wrap = opts.dom;
// your data
this.data = opts.data;
// default type
this.type = opts.type || 'pic';
// default slide direction
this.isVertical = opts.isVertical || false;
// Overspread mode
this.isOverspread = opts.isOverspread || false;
// Play time gap
this.duration = opts.duration || 2000;
// start from 0
this.slideIndex = this.slideIndex || 0;
this.dotOutside = opts.dotOutside || 0;
this.axis = this.isVertical ? 'Y' : 'X';
this.width = this.wrap.clientWidth;
this.height = this.wrap.clientHeight;
this.ratio = this.height / this.width;
this.scale = opts.isVertical ? this.height : this.width;

this.useTime=opts.useTime;

// Callback function when your finger is moving

this.onslide = opts.onslide;
// Callback function when your finger touch the screen
this.onslidestart = opts.onslidestart;
// Callback function when the finger move out of the screen
this.onslideend = opts.onslideend;
// Callback function when the finger move out of the screen
this.onslidechange = opts.onslidechange;

this.dotChange=null;

// looping logic adjust

if (this.data.length < 2) {
this.isLooping = false;
this.isAutoPlay = false;
} else {
this.isLooping = opts.isLooping || false;
this.isAutoplay = opts.isAutoplay || false;
}

// little trick set, when you chooce tear & vertical same time

// iSlider overspread mode will be set true autometicly
if (opts.animateType === 'card' && this.isVertical) {
this.isOverspread = true;
}

// Autoplay mode

if (this.isAutoplay) {
this.play();
}

// debug mode

this.log = opts.isDebug ? function(str) {window.console.log(str);} : function() {};
// set Damping function
this._setUpDamping();
// stop autoplay when window blur
this._setPlayWhenFocus();
// set animate Function
this._animateFunc = (opts.animateType in this._animateFuncs)
? this._animateFuncs[opts.animateType]
: this._animateFuncs['default'];
};

// fixed bug for android device

iSlider.prototype._setPlayWhenFocus = function() {
var self = this;
window.addEventListener('focus', function() {
self.isAutoplay && self.play();
}, false);
window.addEventListener('blur', function() {
self.pause();
}, false);
};

/**

* animation parmas:
*
* @param {Element} dom 图片的外层<li>容器 Img wrapper
* @param {String} axis 动画方向 animate direction
* @param {Number} scale 容器宽度 Outer wrapper
* @param {Number} i <li>容器index Img wrapper's index
* @param {Number} offset 滑动距离 move distance
*/
iSlider.prototype._animateFuncs = {

'default': function (dom, axis, scale, i, offset) {

dom.style.webkitTransform = 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)';
console.log(axis, scale, i, offset)
console.log(dom.style.webkitTransform)
},

'rotate': function (dom, axis, scale, i, offset) {

var rotateDirect = (axis === 'X') ? 'Y' : 'X';
var absoluteOffset = Math.abs(offset);
var bdColor = window.getComputedStyle(this.wrap.parentNode, null).backgroundColor;

if (this.isVertical) {

offset = -offset;
}

this.wrap.style.webkitPerspective = scale * 4;

if (i === 1) {

dom.style.zIndex = scale - absoluteOffset;
} else {
dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset;
}

dom.style.cssText += '-webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; '

+ 'background-color:' + bdColor + '; position:absolute;';
dom.style.webkitTransform = 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ('
+ (0.888 * scale / 2) + 'px) scale(0.888)';
},

'flip': function (dom, axis, scale, i, offset) {

var rotateDirect = (axis === 'X') ? 'Y' : 'X';
var bdColor = window.getComputedStyle(this.wrap.parentNode, null).backgroundColor;
if (this.isVertical) {
offset = -offset;
}
this.wrap.style.webkitPerspective = scale * 4;

if (offset > 0) {

dom.style.visibility = (i > 1) ? 'hidden' : 'visible';
} else {
dom.style.visibility = (i < 1) ? 'hidden' : 'visible';
}

dom.style.cssText += 'position:absolute; -webkit-backface-visibility:hidden; background-color:' + bdColor + ';';

dom.style.webkitTransform = 'translateZ(' + (scale / 2) + 'px) rotate' + rotateDirect
+ '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)';
},

'depth': function (dom, axis, scale, i, offset) {

var zoomScale = (4 - Math.abs(i - 1)) * 0.18;
this.wrap.style.webkitPerspective = scale * 4;
dom.style.zIndex = (i === 1) ? 100 : (offset > 0) ? (1 - i) : (i - 1);
dom.style.webkitTransform = 'scale(' + zoomScale + ', ' + zoomScale + ') translateZ(0) translate'
+ axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)';
},

'flow': function (dom, axis, scale, i, offset) {

var absoluteOffset = Math.abs(offset);
var rotateDirect = (axis === 'X') ? 'Y' : 'X';
var directAmend = (axis === 'X') ? 1 : -1;
var offsetRatio = Math.abs(offset / scale);

this.wrap.style.webkitPerspective = scale * 4;

if (i === 1) {

dom.style.zIndex = scale - absoluteOffset;
} else {
dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset;
}

dom.style.webkitTransform = 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)'

+ 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)'
+ 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)';
},

'card': function (dom, axis, scale, i, offset) {

var absoluteOffset = Math.abs(offset);

if (i === 1) {

dom.style.zIndex = scale - absoluteOffset;
dom.cur = 1;
} else {
dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset * 1000 : (i - 1) * absoluteOffset * 1000;
}

if (dom.cur && dom.cur !== i) {

setTimeout(function() {
dom.cur = null;
}, 300);
}

var zoomScale = (dom.cur) ? 1 - 0.2 * Math.abs(i - 1) - Math.abs(0.2 * offset / scale).toFixed(6) : 1;

dom.style.webkitTransform = 'scale(' + zoomScale + ', ' + zoomScale + ') translateZ(0) translate' + axis
+ '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)';

},

'self' : function(dom,axis,scale,i,offset){
var _scale= (i%2===0) ? _scale=Math.abs(offset/scale) : 1-Math.abs(offset/scale);
dom.style.webkitTransform = 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px) scale('+ _scale +')';
}
};
/**
* animation parmas:
*
* @param {Element} dom 图片的外层<li>容器 Img wrapper
* @param {String} axis 动画方向 animate direction
* @param {Number} scale 容器宽度 Outer wrapper
* @param {Number} i <li>容器index Img wrapper's index
* @param {Number} offset 滑动距离 move distance
*/

/**
* enable damping when slider meet the edge
*/
iSlider.prototype._setUpDamping = function () {
var oneIn2 = this.scale >> 1;
var oneIn4 = oneIn2 >> 1;
var oneIn16 = oneIn4 >> 2;

this._damping = function (distance) {

var dis = Math.abs(distance);
var result;

if (dis < oneIn2) {

result = dis >> 1;
} else if (dis < oneIn2 + oneIn4) {
result = oneIn4 + ((dis - oneIn2) >> 2);
} else {
result = oneIn4 + oneIn16 + ((dis - oneIn2 - oneIn4) >> 3);
}

return distance > 0 ? result : -result;

};
};

/**

* render single item html by idx
*/
iSlider.prototype._renderItem = function (el, i) {
var item;
var html;
var len = this.data.length;

// get the right item of data

if (!this.isLooping) {
item = this.data[i] || {empty: true};
} else {
if (i < 0) {
item = this.data[len + i];
} else if (i > len - 1) {
item = this.data[i - len];
} else {
item = this.data[i];
}
}

if (item.empty) {

el.innerHTML = '';
el.style.background = '';
return ;
}
if (this.type === 'pic') {
// 如果不写width height,就自动匹配为dom的宽高
if(typeof item.width==="undefined") item.width=this.width;
if(typeof item.height==="undefined") item.height=this.height;
if (!this.isOverspread) {
html = item.height / item.width > this.ratio
? '<img height="' + this.height + '" src="' + item.content + '">'
: '<img width="' + this.width + '" src="' + item.content + '">';
// html='<img height="' + this.height + '" src="' + item.content + '">'
} else {
el.style.background = 'url(' + item.content + ') 50% 50% / cover no-repeat'; //ios6及以下不支持这个写法,所以~
}
}
else if (this.type === 'dom') {
html = item.content;
}

html && (el.innerHTML = html);

};

/**

* render list html
*/
iSlider.prototype._renderHTML = function () {
var that=this;
this.outer && (this.outer.innerHTML = '');
console.log(that.dotOutside)
// initail ul element
var outer = this.outer || document.createElement('ul');
outer.style.cssText = 'height:' + (this.height-that.dotOutside) + 'px;width:' + this.width + 'px;';

// storage li elements, only store 3 elements to reduce memory usage

this.els = [];
for (var i = 0; i < 3; i++) {
var li = document.createElement('li');
li.style.cssText = 'height:' + (this.height-that.dotOutside) + 'px;width:' + this.width + 'px;';
this.els.push(li);

// prepare style animation

this._animateFunc(li, this.axis, this.scale, i, 0);
if (this.isVertical && (this._opts.animateType === 'rotate' || this._opts.animateType === 'flip')) {
this._renderItem(li, 1 - i + this.slideIndex);
} else {
this._renderItem(li, i - 1 + this.slideIndex);
}
outer.appendChild(li);
}

// append ul to div#canvas

if (!this.outer) {
this.outer = outer;
this.wrap.appendChild(outer);
}
};

/**

* slide logical, goto data index
*/
iSlider.prototype.slideTo = function (dataIndex) {
var data = this.data;
var els = this.els;
var idx = dataIndex;
var n = dataIndex - this.slideIndex;
var self=this;

if (Math.abs(n) > 1) {

var nextEls = n > 0 ? this.els[2] : this.els[0]
this._renderItem(nextEls, idx);
}

// get right item of data

if (data[idx]) {
this.slideIndex = idx;
} else {
if (this.isLooping) {
this.slideIndex = n > 0 ? 0 : data.length - 1;
} else {
this.slideIndex = this.slideIndex;
n = 0;
}
}

this.log('pic idx:' + this.slideIndex);

// keep the right order of items

var sEle;
if (this.isVertical && (this._opts.animateType === 'rotate' || this._opts.animateType === 'flip')) {
if (n > 0) {
sEle = els.pop();
els.unshift(sEle);
} else if (n < 0) {
sEle = els.shift();
els.push(sEle);
}
} else {
if (n > 0) {
sEle = els.shift();
els.push(sEle);
} else if (n < 0) {
sEle = els.pop();
els.unshift(sEle);
}
}

// slidechange should render new item

// and change new item style to fit animation
if (n !== 0) {
if ( Math.abs(n) > 1) {
this._renderItem(els[0], idx - 1);
this._renderItem(els[2], idx + 1);
} else if (Math.abs(n) === 1) {
this._renderItem(sEle, idx + n);
}
sEle.style.webkitTransition = 'none';
sEle.style.visibility = 'hidden';

setTimeout(function() {

sEle.style.visibility = 'visible';
}, 200);

this.onslidechange && this.onslidechange(this.slideIndex);

if(self.dotChange) self.dotChange();
}

// do the trick animation

for (var i = 0; i < 3; i++) {
if (els[i] !== sEle) {
els[i].style.webkitTransition = 'all '+this.useTime+'ms ease';
}
this._animateFunc(els[i], this.axis, this.scale, i, 0);
}

// stop playing when meet the end of data

if (this.isAutoplay && !this.isLooping && this.slideIndex === data.length - 1) {
this.pause();
}
};

/**

* bind all event handler
*/
iSlider.prototype._bindHandler = function() {
var self = this;
// judge mousemove start or end
var isMoving = false;
var outer = self.outer;
// desktop event support
var hasTouch = !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);
var startEvt = hasTouch ? 'touchstart' : 'mousedown';
var moveEvt = hasTouch ? 'touchmove' : 'mousemove';
var endEvt = hasTouch ? 'touchend' : 'mouseup';

var startHandler = function(evt) {

isMoving = true;

self.pause();

self.onslidestart && self.onslidestart();
self.log('Event: beforeslide');
self.startTime = new Date().getTime();
self.startX = hasTouch ? evt.targetTouches[0].pageX : evt.pageX;
self.startY = hasTouch ? evt.targetTouches[0].pageY : evt.pageY;
};

var moveHandler = function (evt) {

if (isMoving) {
self.nowX=hasTouch ? evt.targetTouches[0].pageX : evt.pageX;
self.nowY=hasTouch ? evt.targetTouches[0].pageY : evt.pageY;
self.deltaX = self.nowX - self.startX;
self.deltaY = self.nowY - self.startY;
// x轴方向移动
if(self.isVertical){
if(Math.abs(self.deltaY)-Math.abs(self.deltaX)>0) {
evt.preventDefault();
}
} else {
if(Math.abs(self.deltaY)-Math.abs(self.deltaX)<0) {
evt.preventDefault();
}
}
var len = self.data.length;
var axis = self.axis;
var currentPoint = hasTouch ? evt.targetTouches[0]['page' + axis] : evt['page' + axis];
var offset = currentPoint - self['start' + axis];

self.onslide && self.onslide(offset);

self.log('Event: onslide');

if (!self.isLooping) {

if (offset > 0 && self.slideIndex === 0 || offset < 0 && self.slideIndex === len - 1) {
offset = self._damping(offset);
}
}

for (var i = 0; i < 3; i++) {

var item = self.els[i];
item.style.webkitTransition = 'all 0s';
self._animateFunc(item, axis, self.scale, i, offset);
}

self.offset = offset;

}
};

var endHandler = function (evt) {

isMoving = false;

var metric = self.offset;

var boundary = self.scale / 2;
var endTime = new Date().getTime();
// a quick slide time must under 300ms
// a quick slide should also slide at least 14 px
boundary = endTime - self.startTime > 300 ? boundary : 14;
if (metric >= boundary) {
self.slideTo(self.slideIndex - 1);
} else if (metric < -boundary) {
self.slideTo(self.slideIndex + 1);
} else {
self.slideTo(self.slideIndex);
}

self.offset = 0;

self.isAutoplay && self.play();
self.onslideend && self.onslideend(self.slideIndex);
self.log('Event: afterslide');
if(self.dotChange) self.dotChange();
};

var orientationchangeHandler = function (evt) {

setTimeout(function() {
self.reset();
self.log('Event: orientationchange');
},100);
};

outer.addEventListener(startEvt, startHandler);

outer.addEventListener(moveEvt, moveHandler);
outer.addEventListener(endEvt, endHandler);
window.addEventListener('orientationchange', orientationchangeHandler);
};

iSlider.prototype.reset = function() {

this.pause();
this._setting();
this._renderHTML();
this.isAutoplay && this.play();
};

/**

* enable autoplay
*/
iSlider.prototype.play = function() {
var self = this;
var duration = this.duration;
clearInterval(this.autoPlayTimer);
this.autoPlayTimer = setInterval(function () {
self.slideTo(self.slideIndex + 1);
}, duration);
};

/**

* pause autoplay
*/
iSlider.prototype.pause = function() {
clearInterval(this.autoPlayTimer);
};

iSlider.prototype.addDot = function(color){

if (!this.isVertical) {
var self = this;
var data = this.data;
var dots = [];
var dotWrap = document.createElement('div');
dotWrap.className = 'islider-dot-wrap addDot'+this.wrap.getAttribute("data-num");
var fregment = document.createDocumentFragment();
for (var i = 0; i < data.length; i++) {
dots[i] = document.createElement('span');
dots[i].className = color+'-dot';
dots[i].setAttribute('index', i);
fregment.appendChild(dots[i]);
if(i===0){
dots[0].classList.add("active");
}
}
dotWrap.appendChild(fregment);
this.wrap.appendChild(dotWrap);
// insertAfter(dotWrap,self.wrap);
}
// function insertAfter(newEl, targetEl) {
// var parentEl = targetEl.parentNode;
// if(parentEl.lastChild == targetEl) {
// parentEl.appendChild(newEl);
// }else {
// parentEl.insertBefore(newEl,targetEl.nextSibling);
// }
// }
this.dotChange=function(){
for(var i=0;i<dots.length;i+=1){
dots[i].classList.remove("active");
}
dots[self.slideIndex].classList.add("active");
}
}

/**

* plugin extend
*/
iSlider.prototype.extend = function(plugin, main) {
if (!main) {
main = iSlider.prototype;
}
Object.keys(plugin).forEach(function(property) {
Object.defineProperty(main, property, Object.getOwnPropertyDescriptor(plugin, property));
});
};

 

HTML

<div id="iSlider-effect-wrapper"  class="iSlider-effect"></div>

var islider1 = new iSlider({

//节点获取
dom: document.getElementById("iSlider-effect-wrapper"),
//图片配置
data: datalist,
duration: 2500,
//animateType切换方式
//default:默认
//rotate:旋转
//flip:弹出
animateType: 'rotate',
//是否自动播放
isAutoplay: true,
//是否循环播放
isLooping: true,
onslideend: function (ret,err) {
var a = islider1.readindex();
vm.getxq(id.split("[")[a],title.split("[")[a],"");
}
// isVertical: true, 是否垂直滚动
});
islider1.addDot("green");
islider1.reset();
}

这就是islider的代码了,如果有报错欢迎评论,我会尽快给你们解答

 

转载于:https://www.cnblogs.com/Thehorse/p/11601032.html

转载地址:https://blog.csdn.net/weixin_30679823/article/details/101814766 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:js与java对json的操作
下一篇:logstash增量同步mysql数据到es

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月02日 13时01分27秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

2d游戏地图编辑器_王者荣耀:新版本爆料!地图编辑器“天工”即将开测,游戏怎么玩由你定!... 2019-04-21
.net framework服务启动后停止_dos命令net图文教程,start启动系统服务stop停止服务批处理脚本... 2019-04-21
8k分辨率需要多大带宽_超乎想象!用RTX3080显卡连索尼8K电视玩游戏感受如何?... 2019-04-21
win10怎么开启aptx_Win10未来的黑科技?微软SurfaceFleet大曝光 2019-04-21
creo视图管理器使用方法_学以致用之中望3D—浅谈使用中望3D的初步感受 2019-04-21
周育如的音标口诀大全_花鸟画口诀大全,实用! 2019-04-21
心电图计算心率公式_医学常用的计算公式口诀(内外妇儿),赶快收藏! 2019-04-21
select 移动端 第一个无法选中_Python爬虫微博(移动端)评论 2019-04-21
华为云welink成像是反的_华为发布智能办公神器WeLink,可连接会议室开会,还可一键遥控报销和智能翻译... 2019-04-21
唱好铁血丹心谐音正规_趙贤典:打好“感情牌” 唱好“大合唱” 2019-04-21
aix系统vi修改命令_Linux基础知识必备:利用vi编辑器创建和编辑正文文件 2019-04-21
天涯明月刀开发_玩家被天涯明月刀手游“冷落”?六大门派角色竟不带正眼看人... 2019-04-21
this指向undefined uiapp_一个this都没有,真好 2019-04-21
add p4 多个文件_2-3【微信小程序全栈开发课程】index页面完善--vue文件代码解析... 2019-04-21
5w2h原则指的是什么_什么是5W2H分析法?一首小诗带入进入大门。 2019-04-21
技校毕业是什么学历_中等职业学校是什么_中等职业学校毕业是什么学历 2019-04-21
2压缩备份数据库_MySQL数据备份与恢复(二) xtrabackup工具 2019-04-21
英特尔cpu发布时间表_被嘲讽的英特尔核显,强大能力其实超乎你的想象 2019-04-21
chi2inv函数 matlab_MATLAB概率和统计(2) 2019-04-21
lisp修改上一个图素_在Windows上安装Haskell 2019-04-21