輕鬆實現JavaScript圖片切換

輕鬆實現JavaScript圖片切換_javascript技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體為大家介紹JavaScript圖片切換的實現方法，分享給大家供大家參考，具體內容如下

效果圖：

網頁看到非常常見的一個圖片轉場效果：在淘寶、JD等購物時，介紹產品的圖片會有多張，一般是顯示一張，底下有一排小圖片，滑鼠放到小圖片上大圖片會切換.參考vivo X5M 移動4G手機 .下面記錄一下實現的過程.

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標籤上方的時候觸發onmouseover事件，執行changeText()方法，將p標籤內的文檔改變.

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 href="http://www.baidu.com" 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>

下一步學習一下怎麼實現局部放大，大家有什麼好的方法嗎？可以一起探討。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More