jQuery實現的簡單焦點圖特效實現過程詳解

antzone發表於2017-04-18
jQuery特效

本章節分享一段程式碼例項，它實現了非常簡單的焦點圖效果。

當然為了簡便，省略了圖片，並且效果也並不是特別的完美，但是也能夠學習到一定原理。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#slider{
  position:relative;
  overflow:hidden;
  margin:20px auto;
  height:240px;
  width:740px;
  padding:5px;
  border:2px solid #cdcdcd;
}
#show{
  position:relative;
  height:240px;
  width:740px;
}
#show .img{
  width:740px;
  height:240px;
  margin-bottom:5px;
}
#num{
  position:absolute;
  right:5px;
  top:220px;
}
#num span{
  float:left;
  display:block;
  text-align:center;
  width:20px;
  height:20px;
  line-height:20px;
  margin:2px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:blod;
  background:#f2f2f2;
  border:1px solid #D78918;
  color:#D78918;
}
#num .current{
  color:#fff;
  width:21px;
  height:21px;
  line-height:21px;
  font-size:16px;
  border:0px;
  margin:0px 1px;
  background-color:#FF7300;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var count=1;
  setInterval(function(){
    count=count==5?0:count;
    var top=-count*(240+5);
    count++;
    $("#show").animate({top:top},600);
    $("#num").find("span").eq(count-1).addClass("current").siblings().removeClass("current");
  },2000);
})
</script>
</head>
<body>
<div id="slider">
  <div id="show">
    <div class="img" style="background:red;"></div>
    <div class="img" style="background:blue"></div>
    <div class="img" style="background:gold"></div>
    <div class="img" style="background:yellow"></div>
    <div class="img" style="background:green"></div>
  </div>
  <div id="num">
    <span class="current">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>
</body>
</html>

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

程式碼註釋:

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

（2）.var count=1，宣告一個變數，用來進行計數的。

（3）.setInterval(function(){},2000)，定時器函式，每隔2秒執行一下指定函式。

（4）.count=count==5?0:count;，如果count等於5，那麼就將其重置為0。

（5）.var top=-count*(240+5)，設定元素的top屬性值，之所以實現輪播，就是不斷的設定元素top值，實現隱藏和顯示圖片的效果。

（6）.count++，count值加1。

（7）.$("#show").animate({top:top},600)，以動畫方式通過top定位元素。

（8）.$("#num").find("span").eq(count-1).addClass("current").siblings().removeClass("current"),這段程式碼的作用就是將對應索引的span元素新增current樣式類，其他的span刪除此樣式類。

相關文章