js部分:
let allA=document.getElementsByClassName("list_a");
let photo=document.getElementsByClassName("photo");
for( let i=0;i<allA.length;i++){
allA[i].onclick= function () {
photo.style.left=-500*i+"px";
}}
html:
<div class="show" style="float: left;width: 600px;height: 300px;overflow: hidden;margin-left:60px;">
<div class="photo">
<div ><a href="#"><img src="resouce/图一.png"></a></div>
<div ><a href="#"><img src="resouce/图二.png"></a></div>
<div><a href="#"><img src="resouce/图三.png"></a></div>
<div ><a href="#"><img src="resouce/图四.png"></a></div>
<div><a href="#"><img src="resouce/图五.png"></a></div>
</div>
<div class="spot" style="background-color: #29323d;width: 600px;position: absolute;bottom:10px">
<div class="spot_list" ><a href="#" class="list_a">相亲对象是神明女</a></div>
<div class="spot_list"><a href="#" class="list_a">修仙从第三次转生开始</a></div>
<div class="spot_list"><a href="#" class="list_a">听说我是神探</a></div>
<div class="spot_list"><a href="#" class="list_a">终宋</a></div>
<div class="spot_list"><a href="#" class="list_a">笑傲江湖</a></div></div></div>
css:
photo{
position: absolute;
width: 3000px;
}
.show{
float: left;
position: relative;
overflow: hidden;
}
.spot_list{
width: 20%;
float: left;
text-align:center;
}
.spot_list a{
text-decoration:none;
color: #ffffff;
}
.