原生JavaScript實(shí)現(xiàn)幻燈片效果
當(dāng)我們制作一個(gè)頁(yè)面時(shí)，尤其是制作一個(gè)首頁(yè)時(shí)，通常會(huì)設(shè)計(jì)一個(gè)可以鏈接到整個(gè)網(wǎng)站的其他主體頁(yè)面的導(dǎo)航欄，或者一段網(wǎng)站的介紹文字中會(huì)包含這頁(yè)面的跳轉(zhuǎn)，通常情況會(huì)使用title屬性為這些跳轉(zhuǎn)鏈接添加一些解釋性的文字，但是我們可以通過(guò)制作一個(gè)幻燈片的demo，加強(qiáng)用戶的體驗(yàn)性。當(dāng)用戶的鼠標(biāo)移動(dòng)到某一鏈接時(shí)，下方會(huì)出現(xiàn)對(duì)應(yīng)的圖片預(yù)覽，這樣即美化頁(yè)面，又大大增加了整個(gè)網(wǎng)站的交互性，下面就讓我們一起制作一個(gè)漂亮的幻燈片腳本吧。
準(zhǔn)備：在制作腳本之前，需要制作一張圖片，這張圖片應(yīng)該展示了所有預(yù)覽效果，如下圖：
index.html
制作有序列表，添加一些頁(yè)面鏈接
<body> <h1>簡(jiǎn)單動(dòng)畫制作</h1> <p>連接跳轉(zhuǎn)目標(biāo)展示</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> <!--動(dòng)態(tài)添加的圖片展示區(qū)域>--> <script src="script.js"></script> </body>
style.css
為這個(gè)導(dǎo)航欄添加一些樣式
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
實(shí)現(xiàn)思路：
在建立腳本之前，我們先整理一下思路，確定我們要做什么？
1. 新建一些節(jié)點(diǎn)用來(lái)展示預(yù)覽圖片
2. 為a標(biāo)簽添加onmouseover事件
3. 通過(guò)setTimeout()函數(shù)，和對(duì)圖片元素left、top偏移量（獲取設(shè)置的left top屬性時(shí) 要轉(zhuǎn)換稱整型）的移動(dòng)完成動(dòng)畫效果
/*共享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","圖片預(yù)覽");
/*添加 使用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);
};
}
/*移動(dòng)
*參數(shù)的含義：圖片所在元素的id；圖片應(yīng)該向左移動(dòng)的偏移量；上偏移量；時(shí)間
*/
function moveElement(elementID,left,top,interval){
/*向后兼容*/
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
/*獲取圖片*/
var img = document.getElementById(elementID);
/*判斷當(dāng)前元素是否已經(jīng)處在一個(gè)動(dòng)畫函數(shù)中
*防止動(dòng)畫堆積
*/
if(img.moveNow){
/*清楚堆棧中的動(dòng)畫*/
clearTimeout(img.moveNow);
}
/*判斷元素是否設(shè)置了left和top*/
if(!img.style.left){
img.style.left = "0px";
}
if(!img.style.top){
img.style.top = "0px";
}
/*獲取圖片當(dāng)前位置
*此時(shí)獲取的值是字符串格式,使用parseInt()強(qiáng)制轉(zhuǎn)化為字符串*/
var oldLeft = parseInt(img.style.left);
var oldTop = parseInt(img.style.top);
/*將當(dāng)前位置與目標(biāo)位置做比較*/
if(oldLeft == left && oldTop == top){
return true;
}
/*為了保證用戶體驗(yàn)，當(dāng)移動(dòng)的距離較大時(shí)應(yīng)該移動(dòng)的快一些
*當(dāng)移動(dòng)的距離比較小時(shí)，可以適當(dāng)慢一些
*根據(jù)相差的距離判斷移動(dòng)的距離,每次移動(dòng)相差距離的1/10
*/
/*dist變量用于存儲(chǔ)當(dāng)前偏移量與目標(biāo)偏移量的距離*/
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;
}
/*移動(dòng)*/
img.style.left = oldLeft+"px";
img.style.top = oldTop+"px";
/*調(diào)用函數(shù)*/
var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
/*將執(zhí)行動(dòng)畫的函數(shù)，設(shè)置成這個(gè)元素的一個(gè)屬性*/
img.moveNow = setTimeout(result,interval);
}
addLoadEvent(show);
最后執(zhí)行效果
此時(shí)，當(dāng)我們將鼠標(biāo)移動(dòng)到不同列表項(xiàng)時(shí)，列表下的圖片就會(huì)移動(dòng)到對(duì)應(yīng)的預(yù)覽圖位置。
到此，一個(gè)簡(jiǎn)單的幻燈片demo就制作完成了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- js 幻燈片的實(shí)現(xiàn)
- javascript實(shí)現(xiàn)圖片切換的幻燈片效果源代碼
- 漂亮的js tab圖片輪換效果代碼(可自定義的幻燈片和圖片緩沖切換)
- ＪＳ＋ＦＬＡＳＨ幻燈片播放圖片腳本，整理了代碼，使得調(diào)用更加方便！
- 使用 JavaScript 創(chuàng)建可維護(hù)的幻燈片效果代碼
- js實(shí)現(xiàn)幻燈片播放圖片示例代碼
- JS實(shí)現(xiàn)的幻燈片切換顯示效果
- JS實(shí)現(xiàn)的多張圖片輪流播放幻燈片效果
- JS實(shí)現(xiàn)淘寶幻燈片效果的實(shí)現(xiàn)方法
- js帶點(diǎn)自動(dòng)圖片輪播幻燈片特效代碼分享
相關(guān)文章
ie與firefox下的event使用說(shuō)明與詳細(xì)區(qū)別
event是ie自帶的一個(gè)對(duì)象，而ff中不存在該對(duì)象，只能通過(guò)傳遞參數(shù)（并且惟一）的方式來(lái)實(shí)現(xiàn)event.2009-10-10
bootstrap Table實(shí)現(xiàn)合并相同行
這篇文章主要為大家詳細(xì)介紹了bootstrapTable實(shí)現(xiàn)合并相同行，fastadmin框架同樣使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
小程序?qū)崿F(xiàn)新用戶判斷并跳轉(zhuǎn)激活的方法
這篇文章主要介紹了小程序?qū)崿F(xiàn)新用戶判斷并跳轉(zhuǎn)激活的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
借用Google的Javascript API Loader來(lái)加速你的網(wǎng)站
加速頁(yè)面加載速度有一個(gè)方法就是把CSS和JS文件放到另外一個(gè)單獨(dú)的服務(wù)器上，這樣在訪問(wèn)量比較大的情況下可以分擔(dān)主服務(wù)器的壓力2009-01-01
JavaScript必知必會(huì)(六) delete in instanceof
這篇文章主要介紹了JavaScript必知必會(huì)(六) delete in instanceof的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
For循環(huán)中分號(hào)隔開的3部分的執(zhí)行順序探討
這篇文章主要探討了For循環(huán)中分號(hào)隔開的3部分的執(zhí)行順序,需要的朋友可以參考下2014-05-05
JS控制一個(gè)DIV層在指定時(shí)間內(nèi)消失的方法
這篇文章主要介紹了JS控制一個(gè)DIV層在指定時(shí)間內(nèi)消失的方法,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了JS寫滑稽笑臉運(yùn)動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法分析
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法,簡(jiǎn)單講述了串的概念、功能并結(jié)合實(shí)例形式分析了基于javascript實(shí)現(xiàn)串的遍歷、比較、查找等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
首先說(shuō)明一下：Js中的作用域不同于其他語(yǔ)言的作用域，要特別注意2012-04-04