原生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来实现. 会动的简历实现 ...
随机推荐
- iOS- 如何建立索引实现本地文本搜索引擎，允许容错搜索？
1.前言 实现一个本地搜索引擎,允许容错搜索,也就是搜索结果不需要和搜索的关键字完全精准匹配.比如,搜索”eric wang“,搜索结果可以包括Erica Watts等等.搜索效率十分高. 这里我们需 ...
- PAT 甲级 1020 Tree Traversals
https://pintia.cn/problem-sets/994805342720868352/problems/994805485033603072 Suppose that all the k ...
- Mac 常用快捷键整理
Mac下常用的快捷键: Command+W 将当前窗口关闭(可以关闭Safari标签栏,很实用) Command+Option+M 将所有窗口最小化 Command+Q 关闭当前应用程序(相当于Doc ...
- javascript 常用知识点
1:浏览器是有缓存的,开发中可以通过快捷键绕过缓存 对于Windows驱动的系统:Ctrl + F5 对于Mac驱动的系统:Command + Shift + R. 2:精度问题 (符点和大数字可能会 ...
- window上安装elasticserach
提供一个百度云链接下载elasticsearch (链接:https://pan.baidu.com/s/1sk8PYjV 密码:l586) 测试达到目的:安装elasticsearch后再安装hea ...
- 【CF55D】Beautiful numbers（动态规划）
[CF55D]Beautiful numbers(动态规划) 题面 洛谷 CF 题解 数位\(dp\) 如果当前数能够被它所有数位整除,意味着它能够被所有数位的\(lcm\)整除. 所以\(dp\)的 ...
- CODECHEF Chef and Churus 解题报告
[CODECHEF]Chef and Churus Description 有一个长度为\(n\)的数组\(A\),有\(n\)个函数,第\(i\)个函数的值为\(\sum_{j=l_i}^{r_i} ...
- CF765F Souvenirs 解题报告
CF765F Souvenirs 题意翻译 给出\(n(2 \le n \le 10^5 )\) ,一个长为\(n\)的序列\(a(0 \le a_i \le 10^9 )\). 给出\(m(1\le ...
- SCWS中文分词，demo演示
上文已经讲了关于SCSW中文分词的安装配置,本节进入demo演示: <?php header('Content-Type:text/html;charset=UTF-8'); echo '< ...
- 【learning】快速沃尔什变换FWT
问题描述 已知\(A(x)\)和\(B(x)\),\(C[i]=\sum\limits_{j\otimes k=i}A[j]*B[k]\),求\(C\) 其中\(\otimes\)是三种位运算的其中一 ...