對於初學js的同窗來講,輪播圖仍是一個難點,尤爲是原生js封裝輪播圖代碼,下面是我以前作的一個輪播圖項目中封裝好的一些代碼,有須要的同窗能夠看一下,有什麼不懂的能夠看註釋,註釋看不懂的能夠直接私信我css
/* * 輪播圖 */ 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(); }
/* * 運動函數 * 參數: * 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]; } }
/* * 輪播圖 */ .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><</p> <p>></p> </div> 接下來在script中直接new一個實例,new Slide(div1, 3000, 1, 1);就能夠實現輪播效果
代碼很簡單,細心觀察,你也是大神瀏覽器