使用原生js寫的一個簡單slider_javascript技巧

複製程式碼 程式碼如下:

• 


• 


• 


• 

/*
* Slider 建構子
* @param {Node} ele 容器節點
* @param {Int} index 預設顯示第幾張
*/
var Slider = function (ele){
this.ele = ele;
this.oList = ele.children[0];
this.items = this.oList.getElementsByTagName("li");
this.itemWidth = parseInt(this.items[0].offsetWidth, 10);
this.page = document.getElementById("page");
this.prevBtn = document.getElementById("prev");
this.nextBtn = document.getElementById("next");
this.init();
}
Slider.prototype = {
建構子：Slider,
init: function(){
this.oList.style.position = 'absolute';
this.oList.style.top = 0;
this.oList.style.left = 0;

this.going = 0;
this.current = 1;
this.speed = 100;
this.timer = null;
this.wrapWidth = parseInt(this.ele.offsetWidth, 10);
this.pageCircles = null;

this.prevBtn.style.marginLeft = -this.itemWidth/2 'px';
this.nextBtn.style.marginRight = -this.itemWidth/2 'px';

if(this.items.length > 2) {
this.setUp();
} else {
this.oList.style.left = (this.wrapWidth - this.itemWidth * this.items.length)/2 'px';
this.prevBtn.style.display = "none";
this.nextBtn.style.display = "none";
}

this.oList.style.width = this.itemWidth * this.items.length 'px';

},
setUp:function(){
var first1 = this.items[0].cloneNode();
first1.innerHTML = this.items[0].innerHTML;

first2 = this.items[1].cloneNode();
first2.innerHTML = this.items[1].innerHTML;

last1 = this.items[this.items.length-1].cloneNode();
last1.innerHTML = this.items[this.items.length-1].innerHTML;

last2 = this.items[this.items.length-2].cloneNode();
last2.innerHTML = this.items[this.items.length-2].innerHTML;

this.oList.appendChild(first1);
this.oList.appendChild(first2);
this.oList.insertBefore(last1, this.items[0]);
this.oList.insertBefore(last2, this.items[0]);

this.buildPage();
this.bindEvent();
this.slientGoTo();
},
buildPage:function(){
for(var i = 0,len = this.items.length - 4; ivar Circle = document.createElement （'跨度'）;
circle.innerHTML = i 1;
this.page.appendChild(圓);
}
this.pageCircles = this.page.getElementsByTagName('span');
this.addEvent(this.page, 'click', 'gotoIndex');
this.page.style.display = '塊';
},
bindEvent:function(){
this.addEvent(this.prevBtn, 'click', 'prev');
this.addEvent(this.nextBtn, '點擊', '下一步');
},
addEvent:function(ele, type, fn, context) {
context = context ||這;
var innerFun = 函數(事件) {
var evt = 事件 ||視窗.事件;
if(typeof fn === 'string'){
context[fn].call(context, this, evt);
} else {
fn.call(context, this, evt);
}
}
if(window.addEventListener) {
ele.addEventListener(type, innerFun, false);
} else {
ele.attachEvent('on' type, innerFun);
}
},
index:function(ele){
varparentNode = ele.parentNode;
var eles = ParentNode.getElementsByTagName(ele.tagName);

for(var i = 0, len = eles.length; iif(eles[i] == ele) {
return i;
}
}
},
hasClass: function(obj, cls) {
return !!obj.className && obj.className.match(new RegExp('(\s|^ ) ) )' cls '(\s|$)'));
},
addClass: function(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className = " " cls;
},
removeClass:function (obj, cls) {
if (this.hasClass(obj, cls)) {
var reg = new RegExp('(\s|^)' cls '(\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
},
gotoIndex:function(eleContext, evt){
var ele = evt.target || evt.srcElement;
var index = this.index(ele);
if(this.current === this.items.length-4 && index === 0) {
this.current = 0;
this.slientGoTo();
} else if(this.current === 1 && index ===this.items.length-5) {
this.current = this.items.length-3;
this.slientGoTo();
}
this.current = 索引 1;
this.doAnimate();
},
prev:function(eleContext, evt){
this.current--;
this.doAnimate();
},
next:function(eleContext, evt){
this.current ;
this.doAnimate();
},
doAnimate:function(){
this.distance = (this.wrapWidth-this.itemWidth*(2*this.current 3))/2 - parseInt(this.oList.style.左，10）;
if(this.distance this.speed = -Math.abs(this.speed);
} else {
this.speed = Math.abs (this.speed);
}
this.distance = Math.abs(this.distance);
this.animate();
},
animate:function(){
var that = this;
this.timer = setTimeout(function() {
var left = parseInt(that.oList.style.left, 10) || 0;

if ( that.going Math.abs( that.speed) >= that.distance) {
if (that.speed > 0) {
that.oList.style.left = left that.distance - that.going ' px';>}else {
that.oList.style.left = left - that.distance that.going 'px';
}
clearTimeout(that.timer);
that.going = 0;
that.onceEnd();
} else {
that.going = Math.abs(that.speed);
that.oList.style.left = left that.speed 'px';
that.animate();
}
}, 25);

},
slientGoTo:function(){
console.log(this.current);
this.oList.style.left = (this.wrapWidth-this.itemWidth*(2*this.current 3))/2 'px';
},
setCircleSelect:function(){
for(var i=0,len = this.pageCircles.length; ivar ele= this.pageCircles[i ];
if(this.hasClass(ele, 'select')) {
this.removeClass(ele, 'select');
}
}
this.addClass(this.pageCircles[this.current-1], 'select');
},
CorrectCurrent:function(){
if(this.current === 0) {
this.current = this.items.length - 4;
} else if(this.current === this.items.length - 3) {
this.current = 1;
} else {
回傳 false;
}
this.slientGoTo();
},
onceEnd:function(){
this.正確的電流（）；
this.setCircleSelect();
}
}
var con = document.getElementById("container");
var s = new Slider(con);
腳本>
身體>