Javascript自定义插件slider使用（首页图片轮播）

大家或许做过（照片轮播）无限滚动图片的项目，但是，如果使用普通的滚动，当到达最后一张时，便会滚动回第一张，这是一个非常不好的用户体验。

但是如果使用不停生成img标签，过了的就移除的话，因为对DOM操作频繁，会对性能造成很大的影响。

那有木有一个方法，即能不使它回滚，又可以有很好的性能呢？

答案是有的。

我的想法是这样的：

中间那一张图片， 假如左移100%，那么当到达中间展示的时候，就使用transform右移 -100%，这样就抵消了，过了的话，100%变成200%； 同理，其他的照片一样

代码如下

Slider 使用（html）：

<div class="banner">
<div id="bannerBody"></div>
<div class="m-banner">
<ul class="m-cursor">
<li class="prev"><</li>
<li class="cursor">1</li>
<li class="cursor">2</li>
<li class="cursor">3</li>
<li class="next">></li>
</ul>
</div>
</div>

var $ = function(selector){
return [].slice.call(document.querySelectorAll(selector));
}

var cursor = $('.m-cursor .cursor');
var prev = $('.m-cursor .prev')[0];
var next = $('.m-cursor .next')[0];

cursor.forEach(function (cursor, index){
cursor.addEventListener('click', function(){
slider.nav(index);
})
})

prev.addEventListener('click',function(){
slider.prev();
});

next.addEventListener('click', function(){
slider.next();
});

var slider = new Slider({
//视口容器
container: document.body,
// 图片列表
images: [
"./imgs/banner1.jpg",
"./imgs/banner2.jpg",
"./imgs/banner3.jpg",

],

// 是否允许拖拽
drag: true
});

// 通过监听`nav`事件来完成额外逻辑
// --------------
slider.on('nav', function(ev){
var pageIndex = ev.pageIndex;
cursor.forEach(function(cursor, index){
if (index === pageIdnex){
cursor.className = 'z-active';
}else{
cursor.className = 'slide';
}
})
})

// 3s 自动轮播
// setInterval(function(){
// 	slider.next();
// }, 3000);

slider.nav(1)

//附上Slider.js
//slider.js
;(function(_){

// 将HTML转换为节点
function html2node(str){
var container = document.createElement('div');
container.innerHTML = str;
return container.children[0];
}

var template =
'<div class="m-slider">\
<div class="slide"></div>\
<div class="slide"></div>\
<div class="slide"></div>\
</div>';

function Slider(opt){
_.extend(this, opt);

//节点及样式设置
this.container = this.container ||  document.getElementById('bannerBody');
this.container.style.overflow = 'hidden';

//组件节点
this.slider = this._layout.cloneNode(true);
this.slides = [].slice.call(this.slider.querySelectorAll('.slide'));

//拖拽
this.offsetWidth = this.container.offsetWidth;
this.breakPoint = this.offsetWidth / 4;
this.pageNum = this.images.length;

//内部数据结构
this.slideIndex = 1;
this.pageIndex = this.pageIndex || 0;
this.offsetAll = this.pageIndex;
// this.pageNum 必须传入
// 初始化动作
this.container.appendChild(this.slider);

// 如果需要拖拽切换
if(this.drag) this._initDrag();

}

_.extend(Slider.prototype, _.emitter);

_.extend( Slider.prototype, {

_layout: html2node(template),

//直接跳转到指定页
nav: function( pageIndex ){

this.pageIndex = pageIndex;
this.slideIndex = typeof this.slideIndex === 'number' ? this.slideIndex: (pageIndex+1)%3;
this.offsetAll = pageIndex;
// this.slider.style.transition = "fadeIn";
this.slider.style.transitionDuration = '0s';

this._calcSlide();

},
//next
next: function(){
this._step(1);
},
//上一页
prev:function(){
this._step(-1);
},

//   // 单步移动
_step(offset){
this.pageIndex += offset;
this.offsetAll += offset;
this.slideIndex += offset;
this.slider.style.transitionDuration = '.5s';

this._calcSlide();
},
// 计算Slide
// 每个slide的left = (offsetAll + offset(1, -1)) * 100%;
// 外层容器 (.m-slider) 的偏移 = offsetAll * 宽度
_calcSlide: function(){
var slideIndex = this.slideIndex = this._normIndex(this.slideIndex, 3),
pageIndex = this.pageIndex = this._normIndex(this.pageIndex, this.pageNum),
offsetAll = this.offsetAll,
pageNum = this.pageNum;

var prevSlideIndex = this._normIndex(slideIndex -1, 3),
nextSlideIndex = this._normIndex(slideIndex +1, 3);

var slides = this.slides;
slides[slideIndex].style.left = (offsetAll) * 100 + '%';
slides[prevSlideIndex].style.left = (offsetAll -1) * 100 + '%';
slides[nextSlideIndex].style.left = (offsetAll +1) * 100 + '%';
// slides[prevSlideIndex].style.animation = "fadeOut 0.5s";
// slides[nextSlideIndex].style.animation = "fadeIn 0.5s";
// 容器偏移
this.slider.style.transform = 'translateX(' + (- offsetAll * 100) +'%) translateZ(0)';

// 当前slide 添加 'z-active'的className
slides.forEach(function(node){ _.delClass(node, 'z-active') })

_.addClass(slides[slideIndex], 'z-active');

this._onNav(this.pageIndex, this.slideIndex);

},

// 标准化下标
_normIndex:  function(index, len){
return (len + index) % len;
},

// 跳转时完成的逻辑， 这里是设置图片的url
_onNav: function( pageIndex, slideIndex){
var slides = this.slides;
//console.log("slideIndex:"+slideIndex+" pageIndex: "+pageIndex)
for(var i = -1; i<=1; i++){

var index = (slideIndex + i +3 ) %3;
var img = slides[index].querySelector('img');
if(!img){
img = document.createElement('img');
slides[index].appendChild(img);
}

img.src = './imgs/banner'+ (this._normIndex(pageIndex + i, this.pageNum)+1)+ '.jpg';
}

this.emit('nav', {
pageIndex: pageIndex,
slideIndex: slideIndex
})

},

//   // 拖动相关, 有兴趣的同学
//   // ----------

_initDrag: function(){

this._dragInfo = {};
this.slider.addEventListener('mousedown', this._dragstart.bind(this));
this.slider.addEventListener('mousemove', this._dragmove.bind(this));
this.slider.addEventListener('mouseup', this._dragend.bind(this));
this.slider.addEventListener('mouseleave', this._dragend.bind(this));

},

_dragstart: function(ev){
var dragInfo = this._dragInfo;
dragInfo.start = {x: ev.pageX, y: ev.pageY};
},

_dragmove: function(ev){

var dragInfo = this._dragInfo;
// 如果还没有开始拖拽则退出
if(!dragInfo.start) return;

ev.preventDefault();
this.slider.style.transitionDuration = '0s';

var start = dragInfo.start;
// 清除恼人的选区
if (window.getSelection) {
window.getSelection().removeAllRanges();
} else if (window.document.selection) {
window.document.selection.empty();
}

// 加translateZ 分量是为了触发硬件加速
this.slider.style.transform =
'translateX(' +  (-(this.offsetWidth * this.offsetAll - ev.pageX+start.x)) + 'px) translateZ(0)'

},

_dragend: function( ev ){

var dragInfo = this._dragInfo;
if(!dragInfo.start) return;

ev.preventDefault();
var start = dragInfo.start;
this._dragInfo = {};
var pageX = ev.pageX;

// 看走了多少距离
var deltX = pageX - start.x;
if( Math.abs(deltX) > this.breakPoint ){
this._step(deltX>0? -1: 1)
}else{
this._step(0)
}

}

})

window.Slider = Slider;

})(util);