<div class="codetitle"> <span><a style="CURSOR: pointer" data="5205" class="copybut" id="copybut5205" onclick="doCopy('code5205')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code5205"> <br> <br> <br> <br><meta charset="UTF-8"> <br><title>Document</title> <br><style type="text/css"> <BR>body,div,ul,li { <BR>margin: 0; <BR>padding: 0; <BR>} <BR>ul,li { <BR>list-style: none; <BR>} <BR>a img { <BR>border: none; <BR>} <BR>.wrap { <BR>width: 100%; <BR>overflow: hidden; <BR>position: relative; <BR>} <BR>.wrap .prev, <BR>.wrap .next { <BR>height: 320px; <BR>position: absolute; <BR>left: -50%; <BR>top: 0; <BR>background-color: #999; <BR>opacity: 0.7; <BR>width: 100%; <BR>} <BR>.wrap .next { <BR>left: auto; <BR>right: -50%; <BR>} <BR>.wrap .prev:hover, <BR>.wrap .next:hover { <BR>opacity: 0.5; <BR>} <BR>.container { <BR>width: 100%; <BR>height: 320px; <BR>} <BR>.container ul { <BR>height: 100%; <BR>} <BR>.container li { <BR>width: 1000px; <BR>height: 100%; <BR>float: left; <BR>} <BR>.container li a, <BR>.container li img { <BR>display: block; <BR>width: 100%; <BR>height: 100%; <BR>} <BR>.page { <BR>position: absolute; <BR>left: 50%; <BR>bottom: 10px; <BR>display:none; <BR>} <BR>.page span { <BR>float: left; <BR>margin-right: 10px; <BR>width: 20px; <BR>height: 20px; <BR>display: block; <BR>cursor: pointer; <BR>background: #999; <BR>border-radius: 50%; <BR>text-align: center; <BR>color: #fff; <BR>} <BR>.page .select { <BR>background: #f00; <BR>} <BR></style> <br> <br> <br><div class="wrap"> <br><div class="container" id="container"> <br><ul> <br><li> <a href="1"><img src="/static/imghwm/default1.png" data-src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg" class="lazy" alt="기본 js를 사용하여 작성된 간단한 Slider_javascript 기술" ></a> </li> <br><li><a href="2"><img src="/static/imghwm/default1.png" data-src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg" class="lazy" alt="기본 js를 사용하여 작성된 간단한 Slider_javascript 기술" ></a></li> <br><li><a href="3"><img src="/static/imghwm/default1.png" data-src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg" class="lazy" alt="기본 js를 사용하여 작성된 간단한 Slider_javascript 기술" ></a></li> <br><li><a href="4"><img src="/static/imghwm/default1.png" data-src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg" class="lazy" alt="기본 js를 사용하여 작성된 간단한 Slider_javascript 기술" ></a></li> <br> </ul> <br> </div> <br><div class="prev" id="prev"></div> <br><div class="next" id="next"></div> <br><div id="page" class="page"></div> <br> </div> <br><script type="text/javascript"> <BR>/* <BR>* 슬라이더 생성자 <BR>* @param {Node} ele 容器节点 <BR>* @param {Int} index 默认显示第几张 <BR>*/ <BR>var Slider = function (ele){ <BR>this.ele = ele; <BR>this.oList = ele.children[0]; <BR>this.items = this.oList.getElementsByTagName("li"); <BR>this.itemWidth = parsInt(this.items[0].offsetWidth, 10); <BR>this.page = document.getElementById("페이지"); <BR>this.prevBtn = document.getElementById("prev"); <BR>this.nextBtn = document.getElementById("next"); <BR>this.init(); <BR>} <BR>Slider.prototype = { <BR>생성자: Slider, <BR>init: function(){ <BR>this.oList.style.position = 'absolute'; <BR>this.oList.style.top = 0; <BR>this.oList.style.left = 0; <br><br>this.going = 0; <BR>this.current = 1; <BR>this.speed = 100; <BR>this.timer = null; <BR>this.wrapWidth = parsInt(this.ele.offsetWidth, 10); <BR>this.pageCircles = null; <br><br>this.prevBtn.style.marginLeft = -this.itemWidth/2 'px'; <BR>this.nextBtn.style.marginRight = -this.itemWidth/2 'px'; <br><br>if(this.items.length > 2) { <BR>this.setUp(); <BR>} else { <BR>this.oList.style.left = (this.wrapWidth - this.itemWidth * this.items.length)/2 'px'; <BR>this.prevBtn.style.display = "없음"; <BR>this.nextBtn.style.display = "없음"; <BR>} <br><br>this.oList.style.width = this.itemWidth * this.items.length 'px'; <br><br>}, <BR>setUp:function(){ <BR>var first1 = this.items[0].cloneNode(); <BR>first1.innerHTML = this.items[0].innerHTML; <br><br>first2 = this.items[1].cloneNode(); <BR>first2.innerHTML = this.items[1].innerHTML; <br><br>last1 = this.items[this.items.length-1].cloneNode(); <BR>last1.innerHTML = this.items[this.items.length-1].innerHTML; <br><br>last2 = this.items[this.items.length-2].cloneNode(); <BR>last2.innerHTML = this.items[this.items.length-2].innerHTML; <br><br>this.oList.appendChild(first1); <BR>this.oList.appendChild(first2); <BR>this.oList.insertBefore(last1, this.items[0]); <BR>this.oList.insertBefore(last2, this.items[0]); <br><br>this.buildPage(); <BR>this.bindEvent(); <BR>this.slientGoTo(); <BR>}, <BR>buildPage:function(){ <BR>for(var i = 0,len = this.items.length - 4; i<len; i ) { <BR>var Circle = document.createElement ('기간'); <BR>circle.innerHTML = i 1; <BR>this.page.appendChild(원); <BR>} <BR>this.pageCircles = this.page.getElementsByTagName('span'); <BR>this.addEvent(this.page, 'click', 'gotoIndex'); <BR>this.page.style.display = '차단'; <BR>}, <BR>bindEvent:function(){ <BR>this.addEvent(this.prevBtn, 'click', 'prev'); <BR>this.addEvent(this.nextBtn, '클릭', '다음'); <BR>}, <BR>addEvent:function(ele, type, fn, context) { <BR>context = context || 이것; <BR>var innerFun = function(event) { <BR>var evt = 이벤트 || 창.이벤트; <BR>if(typeof fn === 'string'){ <BR>context[fn].call(context, this, evt); <BR>} else { <BR>fn.call(context, this, evt); <BR>} <BR>} <BR>if(window.addEventListener) { <BR>ele.addEventListener(type, innerFun, false); <BR>} else { <BR>ele.attachEvent('on' 유형, innerFun); <BR>} <BR>}, <BR>index:function(ele){ <BR>var parentNode = ele.parentNode; <BR>var eles = parentNode.getElementsByTagName(ele.tagName); <br><br>for(var i = 0, len = eles.length; i<len; i ){ <BR>if(eles[i] == ele) { <BR>return i; <BR>} <BR>} <BR>}, <BR>hasClass: function(obj, cls) { <BR>return !!obj.className && obj.className.match(new RegExp('(\s|^ )' cls '(\s|$)')); <BR>}, <BR>addClass: function(obj, cls) { <BR>if (!this.hasClass(obj, cls)) obj.className = " " cls; <BR>}, <BR>removeClass:function (obj, cls) { <BR>if (this.hasClass(obj, cls)) { <BR>var reg = new RegExp('(\s|^)' cls '(\s|$)'); <BR>obj.className = obj.className.replace(reg, ' '); <BR>} <BR>}, <BR>gotoIndex:function(eleContext, evt){ <BR>var ele = evt.target || evt.srcElement; <BR>var index = this.index(ele); <BR>if(this.current === this.items.length-4 && index === 0) { <BR>this.current = 0; <BR>this.slientGoTo(); <BR>} else if(this.current === 1 && index ===this.items.length-5) { <BR>this.current = this.items.length-3; <BR>this.slientGoTo(); <BR>} <BR>this.current = 인덱스 1; <BR>this.doAnimate(); <BR>}, <BR>prev:function(eleContext, evt){ <BR>this.current--; <BR>this.doAnimate(); <BR>}, <BR>next:function(eleContext, evt){ <BR>this.current ; <BR>this.doAnimate(); <BR>}, <BR>doAnimate:function(){ <BR>this.distance = (this.wrapWidth-this.itemWidth*(2*this.current 3))/2 -parseInt(this.oList.style. 왼쪽, 10); <BR>if(this.distance < 0){ <BR>this.speed = -Math.abs(this.speed); <BR>} else { <BR>this.speed = Math.abs(this.speed); <BR>} <BR>this.distance = Math.abs(this.distance); <BR>this.animate(); <BR>}, <BR>animate:function(){ <BR>var that = this; <BR>this.timer = setTimeout(function() { <BR>var left =parseInt(that.oList.style.left, 10) || 0; <br><br>if (that.going Math.abs( that.speed) >= that.distance) { <BR>if (that.speed > 0) { <BR>that.oList.style.left = 왼쪽 that.distance - that.going 'px'; >}else { <BR>that.oList.style.left = 왼쪽 - that.distance that.going 'px'; <BR>} <BR>clearTimeout(that.timer); <BR>that.going = 0; <BR>that.onceEnd(); <BR>} else { <BR>that.going = Math.abs(that.speed); <BR>that.oList.style.left = 왼쪽 that.speed 'px'; <BR>that.animate(); <BR>} <BR>}, 25); <br><br>}, <BR>slientGoTo:function(){ <BR>console.log(this.current); <BR>this.oList.style.left = (this.wrapWidth-this.itemWidth*(2*this.current 3))/2 'px'; <BR>}, <BR>setCircleSelect:function(){ <BR>for(var i=0,len = this.pageCircles.length; i<len; i ) { <BR>var ele= this.pageCircles[i ]; <BR>if(this.hasClass(ele, 'select')) { <BR>this.removeClass(ele, 'select'); <BR>} <BR>} <BR>this.addClass(this.pageCircles[this.current-1], 'select'); <BR>}, <BR>corrightCurrent:function(){ <BR>if(this.current === 0) { <BR>this.current = this.items.length - 4; <BR>} else if(this.current === this.items.length - 3) { <BR>this.current = 1; <BR>} else { <BR>false를 반환합니다. <BR>} <BR>this.slientGoTo(); <BR>}, <BR>onceEnd:function(){ <BR>this.correntCurrent(); <BR>this.setCircleSelect(); <BR>} <BR>} <BR>var con = document.getElementById("container"); <BR>var s = new Slider(con); <BR></script> <br> <br> <br> </div>