輕松實(shí)現(xiàn)JavaScript圖片切換
本文實(shí)例為大家介紹JavaScript圖片切換的實(shí)現(xiàn)方法，分享給大家供大家參考，具體內(nèi)容如下
效果圖：
網(wǎng)頁(yè)看到非常常見(jiàn)的一個(gè)圖片切換效果：在淘寶、JD等購(gòu)物時(shí)，介紹產(chǎn)品的圖片會(huì)有多張，一般是顯示一張，底下有一排小圖片，鼠標(biāo)放到小圖片上大圖片會(huì)切換.參考vivo X5M 移動(dòng)4G手機(jī) .下面記錄一下實(shí)現(xiàn)的過(guò)程.
1. getElementById()
該方法是操作dom非常常用的一個(gè)方法，比如有一p標(biāo)簽，id設(shè)為pid，通過(guò)getElementById(“pid”)就可以對(duì)該元素進(jìn)行操作.
<!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中寫了一個(gè)p標(biāo)簽，id為pid，當(dāng)鼠標(biāo)放到p標(biāo)簽上方的時(shí)候觸發(fā)onmouseover事件，執(zhí)行changeText()方法，將p標(biāo)簽內(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()">百度首頁(yè)</a>
</body>
</html>
上面代碼中，body中有一個(gè)a標(biāo)簽，通過(guò)getElementById()獲取a標(biāo)簽，baiduurl.getAttribute(“href”)的值為默認(rèn)的href屬性,通過(guò)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í)一下怎么實(shí)現(xiàn)局部放大，大家有什么好的方法嗎？可以一起探討。
相關(guān)文章
JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例解析
這篇文章主要為大家詳細(xì)解析了Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義計(jì)時(shí)器功能，設(shè)置一個(gè)時(shí)間，可以開(kāi)始倒計(jì)時(shí)、暫停，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
下面的代碼就是利用js控制cpu的占有率，實(shí)現(xiàn)時(shí)高時(shí)低效果2008-11-11
JS中驗(yàn)證整數(shù)和小數(shù)的正則表達(dá)式
網(wǎng)上很多關(guān)于驗(yàn)證小數(shù)的正則表達(dá)式，但是很多都不是百分百正確，所以我結(jié)合一些前輩的經(jīng)驗(yàn)，寫了一個(gè)，分享到腳本之家平臺(tái)，對(duì)小數(shù)或整數(shù)正則表達(dá)式的相關(guān)知識(shí)感興趣的朋友一起看看吧2018-10-10
這篇文章主要介紹了Web3.js查詢以太幣和代幣余額以及轉(zhuǎn)賬,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
JavaScript工具庫(kù)jscpd檢測(cè)前端代碼重復(fù)度
在前端開(kāi)發(fā)中,代碼的重復(fù)度是一個(gè)常見(jiàn)的問(wèn)題,重復(fù)的代碼不僅增加了代碼的維護(hù)成本,還可能導(dǎo)致程序的低效運(yùn)行,為了解決這個(gè)問(wèn)題,有許多工具和技術(shù)被用來(lái)檢測(cè)和消除代碼重復(fù),其中一個(gè)被廣泛使用的工具就是jscpd2023-10-10
圖片輪換的效果隨處可見(jiàn)，但是我還是試著封裝了一個(gè)函數(shù)。一個(gè)頁(yè)面上可以多次調(diào)用。。。由于初學(xué)代碼寫的不是多好，其中有個(gè)文件是可以踢出到一個(gè)js文件里的，這是為了測(cè)試方便，我都給放在了一個(gè)頁(yè)面里了。2011-09-09
JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript提取元素中第一個(gè)子元素的實(shí)現(xiàn)方法
本文主要介紹了JavaScript提取元素中第一個(gè)子元素的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06