使用原生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 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
详解Angular 4.x 动态创建组件
Apr 25 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 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读取RSS feed的代码
2008/08/01 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
js正确获取元素样式详解
2009/08/07 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
js获取域名的方法
2015/01/27 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
销售总监工作职责
2013/11/21 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
大学专科自荐信
2014/06/17 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技