使用原生js写的一个简单slider_javascript技巧

复制代码 代码如下: Document 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; } /* * 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 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 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 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 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);

使用原生js写的一个简单slider_javascript技巧

Related articles