輕松實現(xiàn)JavaScript圖片切換
本文實例為大家介紹JavaScript圖片切換的實現(xiàn)方法，分享給大家供大家參考，具體內(nèi)容如下
效果圖：
網(wǎng)頁看到非常常見的一個圖片切換效果：在淘寶、JD等購物時，介紹產(chǎn)品的圖片會有多張，一般是顯示一張，底下有一排小圖片，鼠標放到小圖片上大圖片會切換.參考vivo X5M 移動4G手機 .下面記錄一下實現(xiàn)的過程.
1. getElementById()
該方法是操作dom非常常用的一個方法，比如有一p標簽，id設為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“)設置以后，該屬性值改變.完整代碼：
<!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>
下一步學習一下怎么實現(xiàn)局部放大，大家有什么好的方法嗎？可以一起探討。
相關文章
easyui window refresh 刷新兩次的解決方法(推薦)
下面小編就為大家?guī)硪黄猠asyui window refresh 刷新兩次的解決方法(推薦)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript高級程序設計 閱讀筆記（二十一） JavaScript中的XML
雖然XML和DOM已經(jīng)變成Web開發(fā)的重要組成部分，但目前僅IE跟Mozilla支持客戶端的XML處理2012-09-09
gulpjs是一個前端構建工具,gulpjs使用的是nodejs中stream來讀取和操作數(shù)據(jù)，其速度更快,有興趣的可以了解一下。2017-01-01
ant-design-pro?的EditableProTable表格驗證調(diào)用的實現(xiàn)代碼
這篇文章主要介紹了ant-design-pro?的EditableProTable表格驗證調(diào)用,這里的需求是點擊外部的保存要對整個表單進行驗證，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-06-06
Save a File Using a File Save Dialog Box
Save a File Using a File Save Dialog Box...2007-06-06
本文介紹了“node在兩個div之間移動,用ztree實現(xiàn)”的方法，需要的朋友可以參考一下2013-03-03
Bootstrap彈出框(modal)垂直居中的問題及解決方案詳解
這篇文章主要介紹了Bootstrap彈出框(modal)垂直居中的問題及解決方案詳解的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章為大家詳細主要介紹了js實現(xiàn)帶箭頭的進度流程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
本篇文章主要介紹了Javascript邏輯運算符"或"的巧用實例，希望對大家有所幫助，下面就隨小編一起來看看吧2016-12-12
這篇文章主要介紹了通過偽協(xié)議解決父頁面與iframe頁面通信的問題,需要的朋友可以參考下2015-04-04