Home >Web Front-end >H5 Tutorial >A simple method to use JS to automatically switch images after clicking a button

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

高洛峰Original: 2016-12-09 11:41:204775browse

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:

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>

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;
}

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.

Statement：

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

Previous article：H5 mobile image compression upload development processNext article：H5 mobile image compression upload development process

See more

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

Related articles