- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <script src1="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- var index=0;
- setInterval(function(){ $("li").eq(++index).addClass("hover").siblings().removeClass("hover");
- if(index==12){
- index=0
- }
- },400)
- })
- </script>
- <style type="text/CSS">
- .lingbox{position:relative;height:30px;padding-top:100px;width:720px;margin:0 auto;}
- .bg{height:2px;background:red;position:absolute;left:0;top:50%;margin-top:-1px;width:720px;}
- .lingbox ul{zoom:1;margin:0 auto;padding:0;width:720px;height:20px;position:absolute;left:0;top:50%;margin-top:-10px;}
- .lingbox ul:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
- .lingbox ul li{list-style-type:none;float:left;width:20px;height:20px;border-radius:50%;background:#ccc;margin:0 20px;text-indent:-999em;
- }
- .lingbox ul li.hover{background:red;}
- h1{text-align:center;}
- </style>
- </head>
- <body>
- <h1>jquery指示灯</h1>
- <div class="lingbox">
- <div class="bg"></div>
- <ul>
- <li>0</li>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- <li>6</li>
- <li>7</li>
- <li>8</li>
- <li>9</li>
- <li>10</li>
- <li>11</li>
- </ul>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/050820134970.html
来源: http://www.codesnippet.cn/detail/050820134970.html