jquery实现tab选项卡切换_jquery实现TAB选项卡般的图片切换效果

更新时间：2019-07-11 来源：jquery 手机版 字体：大中小

【www.bbyears.com--jquery】

效果如下

jquery实现TAB选项卡般的图片切换效果

代码

代码如下

索引按钮竖向排放<a href="http://www.bbyears.com/clist-108-1.html" target="_blank" class="keylink">jquery</a>图片切换

<script src="/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 图片轮播
bannerRotate.bannerInit();
});
var bannerRotate = {
_time: 3000,
_fade: 200,
_i: 0,
_interval: null,
_navId: "#mb-inav",
_navBox: "#mb-ibox",
_navTxt: "#mb-itxt",
bannerShow: function() {
  $(this._navId).find("li a").removeClass("cur");
  $(this._navId).find("li:eq("+this._i+")").find("a").addClass("cur");

  $(this._navBox).find("a").fadeOut(this._fade);
  $(this._navBox).find("a:eq("+this._i+")").fadeIn(this._fade);

  $(this._navTxt).find("div").hide();
  $(this._navTxt).find("div:eq("+this._i+")").fadeIn(this._fade);
},
bannerStart:function() {
  var _this = this;
  _this._interval = setInterval(function() {
   if(_this._i >= 2) {
    _this._i = 0;
   }
   else {
    _this._i++;
   }
   _this.bannerShow();
  }, _this._time);
},
bannerInit: function() {
  var _this = this;
  _this.bannerStart();
  $(_this._navId).find("li a").bind("mouseover", function() {
   clearInterval(_this._interval);
   _this._i = $(this).parent().index();
   _this.bannerShow();
   _this.bannerStart();
  });
}
};
</script>