Home > Web Front-end > H5 Tutorial > body text

A simple method to use JS to automatically switch images after clicking a button

高洛峰
Release: 2016-12-09 11:41:20
Original
4721 people have browsed it

We often see that the pictures on the main interface of a website can be switched freely, so how is it achieved?

1. The HTML page layout is as shown in the figure:

A simple method to use JS to automatically switch images after clicking a button

2. Implement the above layout

swap.html

   
<!DOCTYPE html PUBLIC &#39;-//W3C//DTD HTML 4.01 Strict//EN&#39; &#39;http://www.w3.org/TR/html4/strict.dtd&#39;>
<html>
<head>
<meta http-equiv=&#39;Content-Type&#39; content=&#39;text/html; charset=UTF-8&#39;>
<title>在此插入标题</title>
<link rel="stylesheet" type="text/css" href="swap.css"/>
<script type="text/javascript">
<!--
function swap(val){
  if(val=="left"){
    left.style.display=&#39;block&#39;;//设置为显示
    center.style.display=&#39;none&#39;;//设置为隐藏
    right.style.display=&#39;none&#39;;
  }else if(val=="center"){
    left.style.display=&#39;none&#39;;
    center.style.display=&#39;block&#39;;
    right.style.display=&#39;none&#39;;
  }else if(val=="right"){
    left.style.display=&#39;none&#39;;
    center.style.display=&#39;none&#39;;
    right.style.display=&#39;block&#39;;
  }
  }
-->
</script>
</head>
<body>
  <div class="main">
  <div class="top">
  <div class="left" id="left"><img  src="images/left.jpg"/ alt="A simple method to use JS to automatically switch images after clicking a button" ></div>
  <div class="center" id="center"><img  src="images/center.jpg"/ alt="A simple method to use JS to automatically switch images after clicking a button" ></div>
  <div class="right" id="right"><img  src="images/right.jpg"/ alt="A simple method to use JS to automatically switch images after clicking a button" ></div>
  </div>
  <div class="bottom">
  <ul>
  <li onmouseover="swap(&#39;left&#39;)"></li>
  <li onmouseover="swap(&#39;center&#39;)"></li>
  <li onmouseover="swap(&#39;right&#39;)"></li>
  </ul>  
  </div>
  </div>
  </body>
  </html>
Copy after login

3.css implementation

swap.css

@CHARSET "UTF-8";
.main{
  width:1320px;
  height:334px;
  border:1px solid red;
  background-color:silver;
}
 
.top{
  width:1300px;
  height:304px;
  margin-top: 5px;
  margin-left: 10px;
  background-color: green;
}
 
.top .left{
  display: block;//让left.jpg作为第一张图片显示
}
.top .center{
  display: none;//初始状态不显示
}
.top .right{
  display: none;//不显示
}
 
.bottom{
  width:1300px;
  height:15px;
  margin-top: 5px;
  margin-left: 10px;
  background-color: gray;
}
.bottom ul{
  margin: 0px;
  margin-left:500px;
  padding: 0px;
  width:260px;
  height:50px;
}
.bottom ul li{
  width:80px;
  height:10px;
  margin-top:3px;
  margin-right:3px;
  background-color:yellow;
  list-style-type: none;
  float:left;
}
Copy after login

4. Things to pay attention to

(1) Be clear about the difference between display and visibility.

display: When setting none, not only the content will be hidden, but also the element will not occupy a position on the page. Hiding is equivalent to the element being temporarily deleted from the page and will not have any effect on the current page.

visibility: When setting hidden, although the content will not be displayed, its elements will still work, which is equivalent to just hiding the content to be displayed, but the things still exist. As the saying goes, "Standing in the pit is not a problem";

(2) Do you want the picture to change when you click it or move the mouse to a specified position? The functions used are of course different. Here, if the table is moved to the specified area, the picture will be switched, so onmouseover() is used.


Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!