原生JavaScript實現(xiàn)幻燈片效果

更新時間：2021年02月19日 09:59:50 作者：清水拌墨茶

這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)幻燈片效果，文中安裝步驟介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

當我們制作一個頁面時，尤其是制作一個首頁時，通常會設計一個可以鏈接到整個網(wǎng)站的其他主體頁面的導航欄，或者一段網(wǎng)站的介紹文字中會包含這頁面的跳轉，通常情況會使用title屬性為這些跳轉鏈接添加一些解釋性的文字，但是我們可以通過制作一個幻燈片的demo，加強用戶的體驗性。當用戶的鼠標移動到某一鏈接時，下方會出現(xiàn)對應的圖片預覽，這樣即美化頁面，又大大增加了整個網(wǎng)站的交互性，下面就讓我們一起制作一個漂亮的幻燈片腳本吧。

準備：在制作腳本之前，需要制作一張圖片，這張圖片應該展示了所有預覽效果，如下圖：

index.html

制作有序列表，添加一些頁面鏈接

<body>
 <h1>簡單動畫制作</h1>
 <p>連接跳轉目標展示</p>
 <ol id="list">
 <li>
 <a href="list1.html" >First</a>
 </li>
 <li>
 <a href="list2.html" >Second</a>
 </li>
 <li>
 <a href="list3.html" >Third</a>
 </li>
 </ol>
 <!--動態(tài)添加的圖片展示區(qū)域>-->
<script src="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

實現(xiàn)思路：

在建立腳本之前，我們先整理一下思路，確定我們要做什么？
1. 新建一些節(jié)點用來展示預覽圖片
2. 為a標簽添加onmouseover事件
3. 通過setTimeout()函數(shù)，和對圖片元素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");

 /*創(chuàng)建圖片展示區(qū)域*/
 /*外層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()函數(shù) 保證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);
 };
}


/*移動
*參數(shù)的含義：圖片所在元素的id；圖片應該向左移動的偏移量；上偏移量；時間
*/
function moveElement(elementID,left,top,interval){
 /*向后兼容*/
 if(!document.getElementById) return false;
 if(!document.getElementById(elementID)) return false;

 /*獲取圖片*/
 var img = document.getElementById(elementID);

 /*判斷當前元素是否已經(jīng)處在一個動畫函數(shù)中
 *防止動畫堆積
 */
 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;
 }

 /*為了保證用戶體驗，當移動的距離較大時應該移動的快一些
 *當移動的距離比較小時，可以適當慢一些
 *根據(jù)相差的距離判斷移動的距離,每次移動相差距離的1/10
 */
 /*dist變量用于存儲當前偏移量與目標偏移量的距離*/
 var dist = 0;
 if(oldLeft < left){
  /*ceil()向上取整 防止小數(shù) 以及小于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";

 /*調用函數(shù)*/
 var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
 /*將執(zhí)行動畫的函數(shù)，設置成這個元素的一個屬性*/
 img.moveNow = setTimeout(result,interval);
}

addLoadEvent(show);

最后執(zhí)行效果