jQuery 迴圈播放的指示燈

admin發表於2019-01-22
jQuery

本章節分享一段程式碼例項，它實現了輪換播放的指示燈的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var index=0;
  setInterval(function(){
    $("li").eq(index++).addClass("hover").siblings().removeClass("hover");
    if(index==13){
      index=0
      $("li").eq(index++).addClass("hover").siblings().removeClass("hover");
    }
  },400)
})
</script>
</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>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var index=0，宣告一個變數用來作為匹配元素的索引。

（3）.setInterval()，執行定時器函式，每隔400毫秒執行一次指定的函式。

（4）.$("li").eq(index++).addClass("hover").siblings().removeClass("hover")，將當前索引值的元素新增hover樣式類，其他的元素刪除hover樣式類，這樣的就實現了當前元素點亮效果。

（5）.if(index==13){

  index=0;

  $("li").eq(index++).addClass("hover").siblings().removeClass("hover");

}，當index==13的時候其實也就是當$("li").eq(index++)這裡的index等於12的時候，本來的意向就是再開始議論迴圈，那麼就將index值重置為0，以此往復。

二.相關閱讀:

（1）.setInterval()方法可以參閱setInterval()一章節。

（2）.eq()方法可以參閱jQuery eq()一章節。

（3）.addClass()方法可以參閱jQuery addClass()一章節。

（4）.siblings()方法可以參閱jQuery siblings()一章節。

（5）.removeClass()方法可以參閱jQuery removeClass()一章節。

相關文章