[javascript]一段焦点图的js代码

复制代码
 1 <html>
 2 <head>
 3     <meta name="name" content="content"charset="utf-8"/>
 4     <style type="text/css" media="screen">
 5         #main{ width: 800px;height: 300px;margin: 0 auto;position: relative;}
 6         #main .list{z-index: 10;}
 7         #main .list li{position: absolute;width: 800px;height: 300px;background: #ccc;list-style: none}
 8         #main .bt{ z-index: 200;position: absolute;bottom: 10px;right: 10px;}
 9         #main .bt li{list-style: none;float: left;width: 40px;height: 40px;border: 1px solid #ccc;text-align: center;line-height: 40px;}
10         #main .bt li:hover{background:#ccc}
11     </style>
12     <script type="text/javascript" src="move.js"></script>
13     <script type="text/javascript">
14     window.onload=function  () {
15          var bt=document.getElementsByTagName('ul')[1];
16          var btli=bt.getElementsByTagName('li');
17          var list=document.getElementsByTagName('ul')[0];
18          var lis=list.getElementsByTagName('li');
19          var index=5;
20         lis[0].style.zIndex=index;
21         for (var i = 0; i < btli.length; i++) {
22             btli[i].index=i;
23             btli[i].onmouseover=function  () {
24                 lis[this.index].style.zIndex=index;
25                 index++;
26             }
27             btli[i].onmouseout=function  () {
28                 lis[0].style.zIndex=index;
29                 index++;
30             }
31 
32         };
33     }
34     </script>
35     <title></title>
36 </head>
37 <body>
38     <div id="main">
39         <ul class="list">
40             <li style="background: #f00;"></li>
41             <li style="background: #ff0"></li>
42             <li style="background: #f0f"> </li>
43             <li style="background: #fcc"></li>
44         </ul>
45         <div class="bt">
46             <ul>
47                 <li>1</li>
48                 <li>2</li>
49                 <li>3</li>
50                 <li>4</li>
51             </ul>
52         </div><!-- / -->
53 
54     </div>
55 </body>
56 </html>
复制代码

闲着没事写的一段javascript代码。

posted @   闲云-野鹤  阅读(196)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae