<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
position: relative;
}
.container > img,
.container .toolbar{
position: absolute;
}
.container > img{
left: 0;
top: 0;
}
.container .toolbar{
top: 430px;
left: 150px;
z-index: 100;
}
.container .toolbar a{
display: inline-block;
width: 20px;
height: 20px;
background-color: blue;
color: #ffffff;
text-align: center;
line-height: 20px;
text-decoration: none;
}
.container .toolbar a.curr,
.container .toolbar a:hover{
background-color: yellow;
color: #000;
}
</style>
</head>
<body>
<div class="container">
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
<img src="images/4.jpg" alt=""/>
<img src="images/5.jpg" alt=""/>
<img src="images/6.jpg" alt=""/>
<div class="toolbar">
<a href="javascript:void(0);" class="curr" onmouseover="showImg(0)" onmouseout="showImg('start')" >1</a>
<a href="javascript:void(0);" onmouseover="showImg(1)" onmouseout="showImg('start')" >2</a>
<a href="javascript:void(0);" onmouseover="showImg(2)" onmouseout="showImg('start')" >3</a>
<a href="javascript:void(0);" onmouseover="showImg(3)" onmouseout="showImg('start')" >4</a>
<a href="javascript:void(0);" onmouseover="showImg(4)" onmouseout="showImg('start')" >5</a>
<a href="javascript:void(0);" onmouseover="showImg(5)" onmouseout="showImg('start')" >6</a>
</div>
</div>
</body>
<script type="text/javascript">
var interval;
//当前图片的索引
var index = 0;
var imgs = document.querySelectorAll(".container > img");
var aes = document.querySelectorAll(".container > .toolbar > a");
function showImg(num){
if(num){
if(typeof num == "number" && num>=0 && num<aes.length){
index = num;
clearInterval(interval);
}
if(num == 'start'){
interval = setInterval(showImg,2000);
return ;
}
}
//得到图片
for(var i=0;i<imgs.length;i++){
//如果是当前要显示的图片 则设置z-index为最大 否则 设置为数组下标+1
if(i == index){
imgs[i].style.zIndex = 99;
aes[i].className = "curr";
}else{
imgs[i].style.zIndex = (i+1);
aes[i].className = " ";
}
}
if(index > imgs.length-1){
index = 0;
}else{
index++;
}
}
interval = setInterval(showImg,2000);
showImg();
</script>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)