原生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写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

随机推荐

rabbitmq 3&period;6 延时消息
rabbitmq-plugins enable rabbitmq_delayed_message_exchange #安装插件 https://github.com/rabbitmq/rabbitmq ...
VirtualBox &amp&semi; Kaili Linux 环境搭建
勾选启用PAE/NX 勾选固态驱动器网卡设置 [添加源] 2016.1月版添加源 cat << EOF > /etc/apt/sources.list deb http://htt ...
iOS 推送所调用的函数详解
AppDelegate类中: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDic ...
matlab编译器和程序发布
如何把编写好的matlab程序转换成c/c++语言,如何编译m文件为可执行程序,如何在没有matlab配置环境的机器上运行你编译出来的可执行程序? 一:matlab的编译器设置执行命令:mbuild ...
EF4&period;1之基础（实现Code First）
Code First:顾名思义:就是通过代码生成数据库----通过类生成数据库中对应的表: 首先定义两个类(就是建模的过程): public class Order { public int Orde ...
C++ 嵌套类使用（一）
一.嵌套类在一个类的内部定义另一个类,我们称之为嵌套类(nested class),或者嵌套类型.之所以引入这样一个嵌套类,往往是因为外围类需要使用嵌套类对象作为底层实现,并且该嵌套类只用于外围类的 ...
JavaScript的DOM操作（三）
1.相关元素操作: var a = document.getElementById("id"); var b = a.nextSibling,找a的下一个同辈元素,注意空格 var ...
shell学习之常用命令总结
1.find命令主要用途:主要用来做文件查找. 使用方法:查找文件的方式可以基于:文件名,文件时间属性,文件的所有者和组,文件权限属性,文件类型属性,文件大小,另外可以指定查找目录的深度,排除指定 ...
SHELL脚本--expr命令全解
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html expr命令可以实现数值运算.数值或字符串比较.字符串匹配.字 ...
C&num; 服务开发
1. 执行权限对于一般服务项目,需要使用管理员权限打开Visual Studio.右击项目 -> 属性 -> 安全性,如下图: 勾选红框中部分,项目中会增加文件 app.mainfest ...