原生JavaScript實現幻燈片效果
當我們制作一個頁面時，尤其是制作一個首頁時，通常會設計一個可以鏈接到整個網站的其他主體頁面的導航欄，或者一段網站的介紹文字中會包含這頁面的跳轉，通常情況會使用title屬性為這些跳轉鏈接添加一些解釋性的文字，但是我們可以通過制作一個幻燈片的demo，加強用戶的體驗性。當用戶的鼠標移動到某一鏈接時，下方會出現對應的圖片預覽，這樣即美化頁面，又大大增加了整個網站的交互性，下面就讓我們一起制作一個漂亮的幻燈片腳本吧。
準備：在制作腳本之前，需要制作一張圖片，這張圖片應該展示了所有預覽效果，如下圖：
index.html
制作有序列表，添加一些頁面鏈接
<body> <h1>簡單動畫制作</h1> <p>連接跳轉目標展示</p> <ol id='list'> <li> <a href='http://www.cgvv.com.cn/bcjs/list1.html' >First</a> </li> <li> <a href='http://www.cgvv.com.cn/bcjs/list2.html' >Second</a> </li> <li> <a href='http://www.cgvv.com.cn/bcjs/list3.html' >Third</a> </li> </ol> <!--動態添加的圖片展示區域>--><script src='http://www.cgvv.com.cn/bcjs/script.js'></script></body>
style.css
為這個導航欄添加一些樣式
ol{ padding-left: 20px;}ol li{ display: inline; margin-right: 10px;}#view{ width: 600px; height: 200px; position: absolute;}#slideShow{ width: 200px; height: 200px; overflow: hidden; position: relative;}
script.js
實現思路：
在建立腳本之前，我們先整理一下思路，確定我們要做什么？1. 新建一些節點用來展示預覽圖片2. 為a標簽添加onmouseover事件3. 通過setTimeout()函數，和對圖片元素left、top偏移量（獲取設置的left top屬性時 要轉換稱整型）的移動完成動畫效果
/*共享load*/function addLoadEvent(fun){ var oldLoad = window.onload; if(typeof oldLoad != 'function'){ window.onload = fun; }else{ window.onload = function(){ oldLoad(); fun(); } }}/*insertAfter*/function insertAfter(newNode,oldNode){ var parent = oldNode.parentNode; if(parent.lastChild == oldNode){ parent.appendChild(newNode); }else{ parent.insertBefore(newNode,oldNode.nextSibling); }}function show(){ /*向后兼容*/ if(!document.getElementById) return false; if(!document.getElementsByTagName) return false; if(!document.createElement) return false; /*獲取列表清單*/ var list = document.getElementById('list'); /*創建圖片展示區域*/ /*外層div*/ var div = document.createElement('div'); div.setAttribute('id','slideShow'); /*img*/ var img = document.createElement('img'); img.setAttribute('id','view'); img.setAttribute('src','image.jpg'); img.setAttribute('alt','圖片預覽'); /*添加 使用insertAfter()函數 保證div緊跟在list列表之后*/ insertAfter(div,list); div.appendChild(img); /*綁定事件*/ var a = list.getElementsByTagName('a'); a[0].onmouseover =function(){ moveElement('view',0,0,10); }; a[1].onmouseover = function(){ moveElement('view',-200,0,10); }; a[2].onmouseover = function(){ moveElement('view',-400,0,10); };}/*移動*參數的含義：圖片所在元素的id；圖片應該向左移動的偏移量；上偏移量；時間*/function moveElement(elementID,left,top,interval){ /*向后兼容*/ if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; /*獲取圖片*/ var img = document.getElementById(elementID); /*判斷當前元素是否已經處在一個動畫函數中 *防止動畫堆積 */ if(img.moveNow){ /*清楚堆棧中的動畫*/ clearTimeout(img.moveNow); } /*判斷元素是否設置了left和top*/ if(!img.style.left){ img.style.left = '0px'; } if(!img.style.top){ img.style.top = '0px'; } /*獲取圖片當前位置 *此時獲取的值是字符串格式,使用parseInt()強制轉化為字符串*/ var oldLeft = parseInt(img.style.left); var oldTop = parseInt(img.style.top); /*將當前位置與目標位置做比較*/ if(oldLeft == left && oldTop == top){ return true; } /*為了保證用戶體驗，當移動的距離較大時應該移動的快一些 *當移動的距離比較小時，可以適當慢一些 *根據相差的距離判斷移動的距離,每次移動相差距離的1/10 */ /*dist變量用于存儲當前偏移量與目標偏移量的距離*/ var dist = 0; if(oldLeft < left){ /*ceil()向上取整 防止小數 以及小于1的情況*/ dist = Math.ceil((left-oldLeft)/10); oldLeft = oldLeft+dist; } if(oldLeft > left){ dist = Math.ceil((oldLeft-left)/10); oldLeft = oldLeft - dist; } if(oldTop < top){ dist = Math.ceil((top-oldTop)/10); oldTop = oldTop+dist; } if(oldTop > top){ dist = Math.ceil((oldTop-top)/10); oldTop = oldTop - dist; } /*移動*/ img.style.left = oldLeft+'px'; img.style.top = oldTop+'px'; /*調用函數*/ var result = 'moveElement(’'+elementID+'’,'+left+','+top+','+interval+')'; /*將執行動畫的函數，設置成這個元素的一個屬性*/ img.moveNow = setTimeout(result,interval);}addLoadEvent(show);
最后執行效果
此時，當我們將鼠標移動到不同列表項時，列表下的圖片就會移動到對應的預覽圖位置。
到此，一個簡單的幻燈片demo就制作完成了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備