當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

原生JavaScript实现幻灯片效果

發布時間：2023/12/10 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了原生JavaScript实现幻灯片效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

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> <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

實現思路：

在建立腳本之前，我們先整理一下思路，確定我們要做什么？
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就制作完成了，如果有什么疑惑，歡迎提問~

總結

以上是生活随笔為你收集整理的原生JavaScript实现幻灯片效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ttf能改成gfont吗_请问如何修改t
下一篇：这些被同事喷的JS代码风格你写过多少？