原生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>
原生js写的一个简单slider的更多相关文章
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）
其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...
- 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~
昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...
- 原生js写的一个当前年份日期星期和时间的显示
话不多说,所有代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...
- js写的一个简单的手风琴菜单
1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q ...
- 用JS写的一个简单的时钟
没什么技术含量,单纯的想传上去.手痒了 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 原生 js 写分页
欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
- 原生JS写的ajax函数
参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
随机推荐
- HDU 1874 畅通工程续-- Dijkstra算法详解 单源点最短路问题
参考 此题Dijkstra算法,一次AC.这个算法时间复杂度O(n2)附上该算法的演示图(来自维基百科): 附上: 迪科斯彻算法分解(优酷) problem link -> HDU 1874 ...
- lilntcode-508-摆动排序
508-摆动排序 给你一个没有排序的数组,请将原数组就地重新排列满足如下性质 nums[0] <= nums[1] >= nums[2] <= nums[3].... 注意事项 请就 ...
- C#高级编程 (第六版) 学习 第四章：继承
第四章 继承 1,继承的类型 实现继承: 一个类派生于一个基类型,拥有该基类型所有成员字段和函数. 接口继承 一个类型只继承了函数的签名,没有继承任何实现代码. 2,实现继承 class MyDe ...
- 各种GIT代码托管工具比较
bitbucket免费支持5个开发成员的团队创建无限私有代码托管库. GOES是一个由GO语音编写的自组GIT托管服务. gitorious 是一个基于GIT版本控制系统的WEB项目托管平台,基于RU ...
- Matlab中TCP通讯-实现外部程序提供优化目标函数解
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Matlab中TCP通讯-实现外部程序提供优化目标函数解 本文地址:http://te ...
- Linux架设DDNS服务器之自动更新脚本
问题描述:客户端是动态IP,每次连网之后要nsupdate下才可以把客户端的hostname 与IP映射更新到DNS Server上 命令如下: nsupdate -k K*****.key > ...
- Halcon 笔记3 形态学
Halcon 三大数据类型: (1)图像 (2)区域 (3)XLD 查看时间工具 如果想让图像减少,则进行腐蚀(或者使用开运算),反之,则进行膨胀(或闭运算) 腐蚀后再进行膨胀,相当于进行开运算.因 ...
- Spring 学习 3- AOP
什么是AOP aop就是纵向的编程,业务1和业务2都需要一个共同的操作,与其往每个业务中都添加同样的代码,不如写一遍代码,让两个业务共同使用这段代码. spring中面向切面编程用的是代理模式,它的实 ...
- 某客的《微信小程序》从基础到实战视频教程
第 1 部分 微信小程序从基础到实战课程概要 第 1 节 微信小程序从基础到实战课程概要 1.1微信小程序从基础到实战课程概要 第 2 部分 初识微信小程序 第 1 节 微信小程序简 ...
- 【Treeview】遍历本地磁盘
一.前言 Treeview控件常用于遍历本地文件信息,通常与Datagridview与ImageList搭配.ImageList控件用于提供小图片给TreeView控件,DatagridView通常显 ...