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


Posted in Javascript onApril 29, 2014
<!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>
Javascript 相关文章推荐
Javascript自定义排序 node运行 实例
Jun 05 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 #Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 #Javascript
百度移动版的url编码解码示例
Apr 29 #Javascript
通过url查找a元素应用案例
Apr 29 #Javascript
jquery实现的图片点击滚动效果
Apr 29 #Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 #Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 #Javascript
You might like
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
简单的自定义php模板引擎
2016/08/26 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python使用socket连接远程服务器的方法
2015/04/29 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
师说教学反思
2014/02/07 职场文书
2014年元旦活动方案
2014/02/15 职场文书
村居抓节水倡议书
2014/05/19 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
教师节倡议书
2014/08/30 职场文书
债务纠纷委托书
2014/08/30 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
会计岗位职责范本
2015/04/02 职场文书
中秋联欢会主持词
2015/07/04 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers