ネイティブ 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; } /* * スライダー コンストラクター * @param {Node} ele 容器节点 * @param {Int} インデックス 默认显示第几张 */ 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("ページ"); 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.running = 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 = "なし"; this.nextBtn.style.display = "なし"; } 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 （'スパン'）; circle.innerHTML = i 1; this.page.appendChild(circle); } this.pageCircles = this.page.getElementsByTagName('span'); this.addEvent(this.page, 'click', 'gotoIndex'); this.page.style.display = 'ブロック'; }, bindEvent:function(){ this.addEvent(this.prevBtn, 'click', 'prev'); this.addEvent(this.nextBtn, 'click', 'next'); }, addEvent:function(ele, type, fn, context) { context = context ||これ; var innerFun = function(event) { var evt = イベント ||ウィンドウ.イベント; 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){ varparentNode = 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.src要素; var インデックス = this.index(ele); if(this.current === this.items.length-4 && インデックス === 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 = インデックス 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.左、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.coming Math.abs( that.speed) >= that. distance) { if (that.speed > 0) { that.oList.style.left = left that. distance - that.coming 'px'; >}else { that.oList.style.left = left - that. distance that.coming 'px'; } clearTimeout(that.timer); それ.行き = 0; that.onceEnd(); } else { that.running = 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 = 新しいスライダー(con);

ネイティブ JS を使用して書かれた単純な slider_javascript テクニック

関連記事