首页 > 代码库 > [javascript]一段焦点图的js代码
[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代码。
[javascript]一段焦点图的js代码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。