<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//css样式
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style-type: none;
}
#header{
width: 1900px;
height: 400px;
background-color: rgb(221,95,3);
position: relative;
}
#nav{
overflow: hidden;
position: absolute;
left:450px;
bottom: 0;
}
#nav li{
float: left;
width: 200px;
height: 50px;
background-color: rgb(234,158,104);
text-align: center;
line-height: 50px;
color: #bd2c00;
margin-top: 10px;
cursor: pointer;
transition: all 200ms linear;
}
#pic{
text-align: center;
}
#nav li.active{
margin-top: 0; //调整点击按钮发生改变的高度
height: 60px;
background-color: rgb(237,174,127);
}
</style>
</head>
<body>
//内容
<div id="header">
<ul id="nav">
<li class="active" data-id ="1">点击</li> //默认第一个为显示点击状态
<li data-id ="2">点击</li> //data-id是自定义id
<li data-id ="3">点击</li>
<li data-id ="4">点击</li>
<li data-id ="5">点击</li>
</ul>
<div id="pic">
<img id="img" src="images/index_slide_con01.png" > //默认显示第一张图片
</div>
</div>
//Js部分
<script>
var nav =document.getElementById("nav");
var liArr = document.getElementsByTagName("li");
var picArr = ["images/index_slide_con01.png","images/index_slide_con02.png","images/index_slide_con03.png","images/index_slide_con04.png","images/index_slide_con05.png"];
var pic = document.getElementById("pic");
var Img = document.getElementById("img");
var p = 0;//
//for加载页面时执行
for (var i = 0; i < liArr.length; i++){
liArr[i].onclick=navChange; //这里为点击状态才执行下一个函数
}
function navChange() { //点击按钮切换图片
// console.log(this);
clearLiClassName(); //调用清空li的class函数
this.className="active"; //点击时执行这个class
var id = this.getAttribute("data-id"); //获取自定义id
document.getElementById("img").src = picArr[(id-1)] //因为数组默认从0开始计算所有id-1获取picArr里面对应的图片
}
//清除li的class
function clearLiClassName() {
for (var i = 0; i < liArr.length; i++){
liArr[i].className="";
}
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/pakhozou/p/12564447.html