用原生js封装轮播图

原生js封装轮播图

对于初学js的同学来说，轮播图还是一个难点，尤其是原生js封装轮播图代码，下面是我之前做的一个轮播图项目中封装好的一些代码，有需要的同学可以看一下，有什么不懂的可以看注释，注释看不懂的可以直接私信我

slide.js

/* * 轮播图 */function Slide(elem, ms, d, ind){ ???this.el = elem; ???this.w = parseInt(getStyle(elem, "width")); ???this.h = parseInt(getStyle(elem, "height")); ???var a = this.el.children; ???this.ul = a[0]; ???this.ol = a[1]; ???this.lBtn = a[2]; ???this.rBtn = a[3]; ???this.olspan = this.ol.getElementsByTagName("span"); ???this.l = this.olspan.length; ???this.ul.style.width = this.w*(this.l+1)+"px"; ??// ul的宽度 ???this.lBtn.style.top = this.rBtn.style.top = (this.h-this.rBtn.offsetHeight)/2+"px"; ???this.ms = ms; ??// 每隔多久执行一次滚动 ???this.d = d; // 轮播时方向 ???????this.ul.innerHTML += this.ul.children[0].outerHTML; //将第一张图片复制到最后一个位置上 ???????var that = this; ???????this.now = ind; ???that.prev = -that.now*that.w; ???????this.run = function(){ ???????var i=0, l=that.l, btns=that.olspan, btn; ???????for( ; i<l; i++){ ???????????btn = btns[i]; ???????????btn.i = i; ???????????btn.onclick = function(){ ???????????????that.now = this.i; ???????????????that.tab(); ???????????} ???????} ???????????????that.timer = setInterval(that.next, that.ms); ???????that.el.onmouseover = that.over; ???????that.el.onmouseout = that.out; ???????that.lBtn.onclick = function(){ ???????????that.now--; ???????????that.d = -1; ???????????that.tab(); ???????} ???????that.rBtn.onclick = function(){ ???????????that.now++; ???????????that.d = 1; ???????????that.tab(); ???????} ???????that.lBtn.onmousedown = that.rBtn.onmousedown = function(){ ???????????return false; ???????} ???} ???????this.tab = function(){ ???????that.ul.style.left = that.prev+"px"; ???// 每次运动时，先瞬间定位到上一次的目标值，然后再执行本次运动 ???????????????if( that.now == that.l ){ ???????????that.prev = 0; ???????????startMove(that.ul, {"left":-that.now*that.w}, function(){ ???????????????that.ul.style.left = "0px"; ???????????}); ???????????that.now = 0; ???????}else if( that.now == -1 ){ ???????????that.now = that.l-1; ???????????that.ul.style.left = -that.l*that.w+"px"; ???????????that.prev = -that.now*that.w; ???????????startMove(that.ul, {"left":that.prev}); ???????}else{ ???????????that.prev = -that.now*that.w; ???????????startMove(that.ul, {"left":that.prev}); ???????} ???????????????// 样式 ???????for( var i=0,l=that.l; i<l; i++ ){ ???????????that.olspan[i].className = ""; ???????} ???????that.olspan[that.now].className = "selected"; ???} ???????this.next = function(){ ???????that.now += that.d; ???????that.tab(); ???} ???????this.over = function(){ ???????clearInterval(that.timer); ???????startMove(that.lBtn, {"opacity":100}); ???????startMove(that.rBtn, {"opacity":100}); ???} ???this.out = function(){ ???????that.timer = setInterval(that.next, that.ms); ???????startMove(that.lBtn, {"opacity":0}); ???????startMove(that.rBtn, {"opacity":0}); ???} ???????this.tab(); ???this.run();}

startMove.js(运动函数)

/* * 运动函数 * 参数： * elem 指操作的元素 * obj 指操作的元素节点上的css属性及它的目标值 * ?????????attr 指操作的元素节点上的css属性 * ?????????target 指操作的元素节点上的css属性的目标值 * fn 指运动函数执行完，执行哪一个函数 */function startMove(elem, obj, fn){ ???// 清除定时器 ???clearInterval(elem.timer); ???// 多属性同时运动时，是否每一个属性都到了目标值 ???// 开启定时器 ???elem.timer = setInterval(function(){ ???????var flag = true; ???// 默认时认为到了目标值 ????????// 支持多属性同时运动 ???????for( var attr in obj ){ ???????????// 目标值 ???????????var target = obj[attr]; ???????????// 判断属性是否为透明度 ???????????var v; // 获取当前值 ???????????if( attr == "opacity" ){ ???????????????v = getStyle(elem, attr); ???????????????v = Math.round(v*100); ???????????}else{ ?????????????????????????????v = parseInt(getStyle(elem, attr)); ???????????} ???????????//console.log(v); ???????????// 目标值与当前值的间距 ???????????var dist = target - v; ???????????// 求步长 ???????????var speed = dist/6; ???????????// 步长取整数 ???????????if(speed>0){ ???????????????speed = Math.ceil(speed); ???????????}else{ ???????????????speed = Math.floor(speed); ???????????} ???????????// 更新 ???????????if( attr == "opacity" ){ ???????????????elem.style.opacity = (v+speed)/100; ???????????????if(/MSIE/.test(navigator.userAgent)){// 如果当前浏览器为IE，则执行兼容代码 ???????????????????elem.style.filter = "alpha(opacity="+(v+speed)+")"; // 兼容低版本IE ???????????????} ???????????}else{ ???????????????elem.style[attr] = v+speed+"px"; ???????????} ???????????// 如果没有到达目标值 ???????????if(v!=target){ ???????????????flag = false; ???????????} ???????????//console.log(0); ???????} ???????// 如果已经到达目标值，则停止定时器 ???????if( flag ){ ???????????clearInterval(elem.timer); ???????????if( fn ){ ??// 如果给定了第三个参数，则执行该函数 ???????????????fn(); ???????????} ???????} ???}, 50); ????}/* * 获取行间样式 */function getStyle(elem, attr){ ???if( window.getComputedStyle ){ ???????return getComputedStyle(elem, null)[attr]; ???}else{ ???????return elem.currentStyle[attr]; ???}}

接下来是一些简单的css代码

/* * 轮播图 */.slide{ ???position: relative; ???overflow: hidden;}.slide *{ ???margin: 0; ???padding: 0;}.slide li{ ???float: left; ???list-style: none;}.slide>ul{ ???position: absolute; ???left: 0; ???top: 0;}.slide>ul>li{ ???}.slide>ol{ ???position: absolute; ???right: 0; ???bottom: 0;}.slide>ol>li{ ???padding: 10px;}.slide>ol>li>span{ ???display: block; ???width: 20px; ???height: 20px; ???border-radius: 10px; ???background: white; ???cursor: pointer;}.slide .selected{ ???background: greenyellow;}.slide>p{ ???position: absolute; ???display: block; ???width: 30px; ???height: 30px; ???text-align: center; ???line-height: 25px; ???border-radius: 15px; ???background: white; ???cursor: pointer; ???opacity: 0;}.slide>p:hover{ ???background: greenyellow;}.slide>p:nth-child(3){ ???left: 10px;}.slide>p:nth-child(4){ ???right: 10px;}

使用方法

<div id="div1" class="slide"> ???<ul> ???????<li><img src="img/001.jpg"/></li> ???????<li><img src="img/002.jpg"/></li> ???????<li><img src="img/003.jpg"/></li> ???????<li><img src="img/004.jpg"/></li> ???</ul> ???<ol> ???????<li><span></span></li> ???????<li><span></span></li> ???????<li><span></span></li> ???????<li><span></span></li> ???</ol> ???<p>&lt;</p> ???<p>&gt;</p></div>接下来在script中直接new一个实例,new Slide(div1, 3000, 1, 1);就可以实现轮播效果

代码很简单，细心观察，你也是大神