原生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来实现. 会动的简历实现 ...
随机推荐
- A10
今日内容: 完善界面.解决剩下的一些问题 明日计划: 无 困难: 无
- Java GUI 点击按钮退出
import java.awt.*; import java.awt.event.*; public class TestFrameTwo implements ActionListener { Fr ...
- 浅析GCC下C++多重继承 & 虚拟继承的对象内存布局
继承是C++作为OOD程序设计语言的三大特征(封装,继承,多态)之一,单一非多态继承是比较好理解的,本文主要讲解GCC环境下的多重继承和虚拟继承的对象内存布局. 一.多重继承 先看几个类的定义: 01 ...
- 性能测试工具Loadrunner使用经验小结（原创更新版）
1. 引言 1.1. 简介 loadrunner是一种预测系统行为和性能的负载测试工具,它可以轻松创建虚拟用户.创建真实的负载.定位性能问题.重复测试保证系统的高性能 globa-100的注册码:AE ...
- linux php 访问sql server设置
1.安装freeTDS wget ftp://ftp.freetds.org/pub/freetds/stable/freetds-stable.tgz 1.1.进入到你下载的目录然后解压.tar - ...
- sharepoint content type publishing
1. Create 1 Project Team sites (Site1) on SharePoint(可以用普通site)2. Go to http://<PCName>:8080/_ ...
- Java中TimeZone类的常用方法
一.TimeZone类的定义 TimeZone类是一个抽象类,主要包含了对于时区的各种操作,可以进行计算时间偏移量或夏令时等操作 二.TimeZone类的常用方法 1.getAvailableIDs( ...
- 洛谷P2894[USACO08FEB]酒店Hotel（线段树）
问题描述 奶牛们最近的旅游计划,是到苏必利尔湖畔,享受那里的湖光山色,以及明媚的阳光.作为整个旅游的策划者和负责人,贝茜选择在湖边的一家著名的旅馆住宿.这个巨大的旅馆一共有N (1 <= N & ...
- 520的信心赛——点点玩deeeep
3.点点玩 deeeep(deeeep.cpp) 描述 点点最近迷上了 deeeep(此 de 非彼 de),在研究一个特殊的最长树链问题 ...
- Android性能优化：布局优化 详细解析（含<include>、<ViewStub>、<merge>讲解 ）
1. 影响的性能 布局性能的好坏 主要影响 :Android应用中的页面显示速度 2. 如何影响性能 布局影响Android性能的实质:页面的测量 & 绘制时间 1个页面通过递归 完成测量 & ...