使用原生js写的一个简单slider

159 阅读 0 评论 105 点赞

我是靠谱客的博主无奈太阳，最近开发中收集的这篇文章主要介绍使用原生js写的一个简单slider，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style type="text/css"> 
body,div,ul,li { 
margin: 0; 
padding: 0; 
} 
ul,li { 
list-style: none; 
} 
a img { 
border: none; 
} 
.wrap { 
width: 100%; 
overflow: hidden; 
position: relative; 
} 
.wrap .prev, 
.wrap .next { 
height: 320px; 
position: absolute; 
left: -50%; 
top: 0; 
background-color: #999; 
opacity: 0.7; 
width: 100%; 
} 
.wrap .next { 
left: auto; 
right: -50%; 
} 
.wrap .prev:hover, 
.wrap .next:hover { 
opacity: 0.5; 
} 
.container { 
width: 100%; 
height: 320px; 
} 
.container ul { 
height: 100%; 
} 
.container li { 
width: 1000px; 
height: 100%; 
float: left; 
} 
.container li a, 
.container li img { 
display: block; 
width: 100%; 
height: 100%; 
} 
.page { 
position: absolute; 
left: 50%; 
bottom: 10px; 
display:none; 
} 
.page span { 
float: left; 
margin-right: 10px; 
width: 20px; 
height: 20px; 
display: block; 
cursor: pointer; 
background: #999; 
border-radius: 50%; 
text-align: center; 
color: #fff; 
} 
.page .select { 
background: #f00; 
} 
</style> 
</head> 
<body> 
<div class="wrap"> 
<div class="container" id="container"> 
<ul> 
<li><a href="1"><img src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg"></a> </li> 
<li><a href="2"><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg"></a></li> 
<li><a href="3"><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg"></a></li> 
<li><a href="4"><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg"></a></li> 
</ul> 
</div> 
<div class="prev" id="prev"></div> 
<div class="next" id="next"></div> 
<div id="page" class="page"></div> 
</div> 
<script type="text/javascript"> 
/* 
* Slider constructor 
* @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 = { 
constructor: 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; i<len; i++) { 
var circle = document.createElement('span'); 
circle.innerHTML = i + 1; 
this.page.appendChild(circle); 
} 
this.pageCircles = this.page.getElementsByTagName('span'); 
this.addEvent(this.page, 'click', 'gotoIndex'); 
this.page.style.display = 'block'; 
}, 
bindEvent:function(){ 
this.addEvent(this.prevBtn, 'click', 'prev'); 
this.addEvent(this.nextBtn, 'click', 'next'); 
}, 
addEvent:function(ele, type, fn, context) { 
context = context || this; 
var innerFun = function(event) { 
var evt = event || window.event; 
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){ 
var parentNode = ele.parentNode; 
var eles = parentNode.getElementsByTagName(ele.tagName); 

for(var i = 0, len = eles.length; i<len; i++){ 
if(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 = index + 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.left, 10); 
if(this.distance < 0){ 
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; i<len; i++) { 
var 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 { 
return false; 
} 
this.slientGoTo(); 
}, 
onceEnd:function(){ 
this.correctCurrent(); 
this.setCircleSelect(); 
} 
} 
var con = document.getElementById("container"); 
var s = new Slider(con); 
</script> 
</body> 
</html> 