Easily implement JavaScript image switching_javascript skills-JS Tutorial-php.cn

Easily implement JavaScript image switching_javascript skills

WBOY

Release： 2016-05-16 15:20:13

Original

1331 people have browsed it

The example in this article introduces the implementation method of JavaScript image switching and shares it with you for your reference. The specific content is as follows

Rendering:

A very common picture switching effect is seen on web pages: when shopping on Taobao, JD, etc., there will be multiple pictures introducing products. Generally, one picture is displayed with a row of small pictures underneath. When the mouse is placed on the small picture, it will become larger. The picture will switch. Refer to the vivo X5M mobile 4G mobile Easily implement JavaScript image switching_javascript skills. The implementation process is recorded below.

1. getElementById()

This method is a very common method for operating dom. For example, if there is a p tag and the id is set to pid, the element can be operated through 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>

Copy after login

In the above code, a p tag is written in the body, with the id being pid. When the mouse is placed over the p tag, the onmouseover event is triggered, and the changeText() method is executed to change the document in the p tag.

2. setAttribute() and getAttribute()

The getAttribute() method is used to obtain the value of a certain attribute, and the setAttribute() method is used to assign a value to a certain attribute.

<!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>

Copy after login

In the above code, there is an a tag in the body. The a tag is obtained through getElementById(). The value of baiduurl.getAttribute(“href”) is the default href attribute. Through baiduurl.setAttribute(“href”, “http: //www.taobao.com") After setting, the attribute value changes. Complete code:

<!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;
      }
 #Easily implement JavaScript image switching_javascript skillsimg{
       padding: 10px;
       border-color: 1px solid #cccccc;
    }

  </style>


</head>
<body>
   <div id="imgbox">
    <img src="images/Easily implement JavaScript image switching_javascript skills1.jpg"    style="max-width:90%"  style="max-width:90%" alt="Easily implement JavaScript image switching_javascript skills" id="Easily implement JavaScript image switching_javascript skillsimg">   
    <p id="decimg">Easily implement JavaScript image switching_javascript skills image1</p>
   </div>

   <table>
    <tbody>
      <tr>
        <td width="50px">
          <img src="images/Easily implement JavaScript image switching_javascript skills2.jpg"    style="max-width:90%"  style="max-width:90%" title="Easily implement JavaScript image switching_javascript skills image2" alt="" onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/Easily implement JavaScript image switching_javascript skills3.jpg"    style="max-width:90%"  style="max-width:90%" title="Easily implement JavaScript image switching_javascript skills image3" alt=""onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/Easily implement JavaScript image switching_javascript skills4.jpg"    style="max-width:90%"  style="max-width:90%" title="Easily implement JavaScript image switching_javascript skills image4" alt=""onmouseover="changeImg(this)" ></td>
        <td width="50px">
          <img src="images/Easily implement JavaScript image switching_javascript skills5.jpg"    style="max-width:90%"  style="max-width:90%" title="Easily implement JavaScript image switching_javascript skills image5" alt=""onmouseover="changeImg(this)" ></td>

      </tr>
    </tbody>
   </table>

   <script type="text/javascript">
     function changeImg(whichpic){       
         var imgattr=whichpic.getAttribute("src");
         var Easily implement JavaScript image switching_javascript skillsimg=document.getElementById("Easily implement JavaScript image switching_javascript skillsimg");
         Easily implement JavaScript image switching_javascript skillsimg.setAttribute("src",imgattr);
         var dectext=whichpic.getAttribute("title");
         document.getElementById("decimg").innerHTML=dectext;
     }
   </script>
</body>
</html>

Copy after login

The next step is to learn how to achieve partial magnification. Do you have any good methods? We can discuss it together.