Simple way to automatically switch images after clicking a button using JS

I often see pictures of the main interface of a website that can be switched freely, so how does it be implemented?

The page layout is shown in the figure:

Main（div）

top(div) (shows the picture to be displayed)

bottom

UL (li) <select>left

center

right

2. Implement the above layout

&lt;!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http:///TR/html4/'&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;
&lt;title&gt;Insert the title here&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href=""/&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
function swap(val){
if(val=="left"){
='block';//Set to display='none';//Set to hide='none';
}else if(val=="center"){
='none';
='block';
='none';
}else if(val=="right"){
='none';
='none';
='block';
}
}
--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="main"&gt;
&lt;div class="top"&gt;
&lt;div class="left" &gt;&lt;img src="images/"/&gt;&lt;/div&gt;
&lt;div class="center" &gt;&lt;img src="images/"/&gt;&lt;/div&gt;
&lt;div class="right" &gt;&lt;img src="images/"/&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="bottom"&gt;
&lt;ul&gt;
&lt;li onmouseover="swap('left')"&gt;&lt;/li&gt;
&lt;li onmouseover="swap('center')"&gt;&lt;/li&gt;
&lt;li onmouseover="swap('right')"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Implementation

@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;//Let it be displayed as the first picture}
.top .center{
display: none;//The initial status does not display}
.top .right{
display: none;//Not displayed}

.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. Places to pay attention to

(1) The difference between display and visibility should be clear.

display: When setting none, not only will the content be hidden, but the element will not occupy a position on the page. Hiding is equivalent to temporarily deleted from the page and will not play any role in 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 thing still exists. In the saying goes, "Standing a pit will not be xx";

(2) Do you want to click or move the mouse to the specified location and the picture will change?Of course the functions used are different. Here, if the table moves to the specified area, the image switching will be realized, so onmouseover() is used.

The above is all the simple methods that the editor brings to you to use JS to automatically switch images after clicking buttons. I hope everyone supports me~