A simple method to use JS to automatically switch images after clicking a button-H5 Tutorial-php.cn

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

高洛峰

Release： 2016-12-09 11:41:20

Original

4770 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.