輕松實現(xiàn)JavaScript圖片切換
本文實例為大家介紹JavaScript圖片切換的實現(xiàn)方法,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
網(wǎng)頁看到非常常見的一個圖片切換效果:在淘寶、JD等購物時,介紹產(chǎn)品的圖片會有多張,一般是顯示一張,底下有一排小圖片,鼠標放到小圖片上大圖片會切換.參考vivo X5M 移動4G手機 .下面記錄一下實現(xiàn)的過程.
1. getElementById()
該方法是操作dom非常常用的一個方法,比如有一p標簽,id設(shè)為pid,通過getElementById(“pid”)就可以對該元素進行操作.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript"> function changeText(){ document.getElementById("pid").innerHTML ="It works!"; } </script> </head> <body> <p id="pid" onmouseover="changeText()">Hello word!</p> </body> </html>
上面代碼中在body中寫了一個p標簽,id為pid,當鼠標放到p標簽上方的時候觸發(fā)onmouseover事件,執(zhí)行changeText()方法,將p標簽內(nèi)的文檔改變.
2. setAttribute()和getAttribute()
getAttribute()方法用于獲取某一屬性的值,setAttribute()方法用于給某一屬性賦值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript"> function changeUrl(){ var baiduurl=document.getElementById("aid"); baiduurl.getAttribute("href"); baiduurl.setAttribute("href", "http://www.taobao.com"); baiduurl.innerHTML="淘寶"; } </script> </head> <body> <a id="aid" onmouseover="changeUrl()">百度首頁</a> </body> </html>
上面代碼中,body中有一個a標簽,通過getElementById()獲取a標簽,baiduurl.getAttribute(“href”)的值為默認的href屬性,通過baiduurl.setAttribute(“href”, “http://www.taobao.com“)設(shè)置以后,該屬性值改變.完整代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>on</title> <style type="text/css" media="screen"> *{ padding: 0; } body{ font-family: 微軟雅黑; } #imgbox{ width: 320px; height: 490px; padding: 10px; box-shadow: 5px; border: 1px solid #ccc; border-radius: 10px; } #phoneimg{ padding: 10px; border-color: 1px solid #cccccc; } </style> </head> <body> <div id="imgbox"> <img src="images/phone1.jpg" height="400" width="320" alt="phone" id="phoneimg"> <p id="decimg">phone image1</p> </div> <table> <tbody> <tr> <td width="50px"> <img src="images/phone2.jpg" height="100" width="80" title="phone image2" alt="" onmouseover="changeImg(this)" ></td> <td width="50px"> <img src="images/phone3.jpg" height="100" width="80" title="phone image3" alt=""onmouseover="changeImg(this)" ></td> <td width="50px"> <img src="images/phone4.jpg" height="100" width="80" title="phone image4" alt=""onmouseover="changeImg(this)" ></td> <td width="50px"> <img src="images/phone5.jpg" height="100" width="80" title="phone image5" alt=""onmouseover="changeImg(this)" ></td> </tr> </tbody> </table> <script type="text/javascript"> function changeImg(whichpic){ var imgattr=whichpic.getAttribute("src"); var phoneimg=document.getElementById("phoneimg"); phoneimg.setAttribute("src",imgattr); var dectext=whichpic.getAttribute("title"); document.getElementById("decimg").innerHTML=dectext; } </script> </body> </html>
下一步學(xué)習(xí)一下怎么實現(xiàn)局部放大,大家有什么好的方法嗎?可以一起探討。
相關(guān)文章
JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09Bootstrap時間選擇器datetimepicker和daterangepicker使用實例解析
這篇文章主要為大家詳細解析了Bootstrap時間選擇器datetimepicker和daterangepicker使用實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09JavaScript工具庫jscpd檢測前端代碼重復(fù)度
在前端開發(fā)中,代碼的重復(fù)度是一個常見的問題,重復(fù)的代碼不僅增加了代碼的維護成本,還可能導(dǎo)致程序的低效運行,為了解決這個問題,有許多工具和技術(shù)被用來檢測和消除代碼重復(fù),其中一個被廣泛使用的工具就是jscpd2023-10-10JavaScript提取元素中第一個子元素的實現(xiàn)方法
本文主要介紹了JavaScript提取元素中第一個子元素的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06