jQuery選項卡切換圖片效果程式碼例項

antzone發表於2017-04-06
jQuery

本章節分享一段程式碼例項，它實現了選項卡式的圖片切換效果。

也就是點選頂部選項卡實現圖片切換效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:1024px;
  height:768px;
  margin:0 auto;
}
ul{
  width:1024px;
  height:40px;
  margin:0;
  padding:0;
}
ul li{
  width:254px;
  line-height:40px;
  border-bottom:solid 2px #FB066F;
  text-align:center;
  list-style-type:none;
  float:left;
  margin-right:2px;
  background:#fff;
}
ul li.hover_css{
  border-bottom:solid 2px #06F;
  background:#f0f0f0;
}
p{
  margin:0;
  padding:0;
  text-align:center;
  padding-top:20px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  hoverFn($("ul li"),"hover_css",$("p img"),"big");
  function hoverFn(obj,hc,content,url){
    obj.hover(function(){
      var h_css=hc;  
      $(this).addClass(h_css).siblings().removeClass(h_css);
      var imgUrl=$(this).attr(url);
      content.attr("src",imgUrl);  
    });
  }
})
</script>
</head>
<body>
<div>
  <ul>
    <li class="hover_css" big="img/1.jpg">風景</li>
    <li big="img/2.jpg">美女</li>
    <li big="img/3.jpg">帥鍋</li>
    <li big="img/4.jpg">惡搞</li>
  </ul>
  <p><img src="img/1.jpg" /></p>
</div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.hoverFn($("ul li"),"hover_css",$("p img"),"big"),呼叫此函式，此函式的作用會在下面介紹。

（3）.function hoverFn(obj,hc,content,url){}，此方法可以實現註冊事件處理函式效果，第一個引數規定要註冊處理函式的元素，第二個引數是class樣式類名稱，第三個引數規定p元素的img元素，第三個引數是選項卡li元素的big屬性。

（4）.obj.hover(function(){

  var h_css=hc;  

  $(this).addClass(h_css).siblings().removeClass(h_css);

  var imgUrl=$(this).attr(url);

  content.attr("src",imgUrl);  

})，首先將樣式類名稱賦值給你變數h_css。

為當前滑鼠懸浮的li元素新增此樣式類，然後其他的兄弟元素刪除此樣式類。

然後獲取當前li元素的big屬性值，其實也就是一個圖片的url。

然後將p元素中的img圖片連結地址換成上面獲取的url地址。

二.相關閱讀:

（1）.hover事件可以參閱jQuery hover事件一章節。

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

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

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

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

相關文章