一、 先上主图
![在这里插入图片描述](https://img-blog.csdnimg.cn/e1f44fffb5714cdfb04d5f28fb91fc7c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTcxMzkzNw==,size_16,color_FFFFFF,t_70)
二、代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变元素中的内容</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 960px;
}
.dian{
position: absolute;
width: 27px;
height: 27px;
line-height: 27px;
text-align: center;
border-radius: 50%;
background-color: rgba(255, 255, 255,0.47)
top: 500px;
cursor: pointer;
}
#one{
left: 27px;
}
#two{
left: 67px;
}
#three{
left: 107px;
}
#four{
left: 147px;
}
</style>
</head>
<body>
<img src="img/dj.png" alt="刀剑神域" title="刀剑神域">
<div id="one" class="dian">1</div>
<div id="two" class="dian">2</div>
<div id="three" class="dian">3</div>
<div id="four" class="dian">4</div>
<script>
let dj = document.getElementById('one');
let mz = document.getElementById('two');
let lm = document.getElementById('three');
let sh = document.getElementById('four');
let img = document.querySelector('img');
dj.onclick = function(){
img.src = 'img/dj.png';
img.alt = '刀剑神域'
img.title = '刀剑神域'
}
mz.onclick = function(){
img.src = 'img/mz.png';
img.alt = '你的名字'
img.title = '你的名字'
}
lm.onclick = function(){
img.src = 'img/lm.png';
img.alt = '蕾姆'
img.title = '蕾姆'
}
sh.onclick = function(){
img.src = 'img/sh.png';
img.alt = '四月是你的谎言'
img.title = '四月是你的谎言'
}
</script>
</body>
</html>
三、最终效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/6b4f4f2a793246c092a72183d854aa86.gif#pic_center)
四、小结
- js小白,代码肯定有地方是不好的,请大家自行修改,谢谢。
- 最后-----推荐个网站------里面有好多好看壁纸------https://wall.alphacoders.com/