jquery按鈕控制選項卡背景滑動切換



119 473 158



特效描述:按鈕控制 選項卡滑動 背景滑動切換,背景滑動,背景切換,選項卡切換,按鈕控制,選項卡滑動。

代碼結構

1. 引入JS

<script src="js/jquery-1.7.2.min.js"></script>

2. HTML代碼

<div class="allbody">
  <div class="tab_tle">
    <ul>
      <li class="now">第一個</li>
      <li>第二個</li>
      <li>第三個</li>
      <li>第四個</li>
    </ul>
    <div class="movebg"></div>
  </div>
  <div class="tab_con">
    <div class="tab_slide">
      <div class="tab_li">
        <ul>
          <li>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
          </li>
        </ul>
        <ul>
          <li>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
          </li>
        </ul>
        <ul>
          <li>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
          </li>
        </ul>
        <ul>
          <li>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
            <p>每接一個班級,第一件事就要看看學生的名字有沒有生僻字,查字典做好準備,即使這樣還是讀錯過不少學生的名字??被硬生生逼成了“姓氏專家”。戳圖,老師整理的部分容易讀錯的姓氏。轉起學習!別再錯了!</p>
          </li>
        </ul>
        <div class="clear"></div>
      </div>
    </div>
    <div class="tab_btn"><a href="javascript:;" class="tab_prev"></a><a href="javascript:;" class="tab_next"></a></div>
  </div>
</div>
<script type="text/javascript">
$(function(){
	//按鈕相對于父級垂直居中
	var tabconH = $('.tab_con').height();
	var tabtnH = $('..tab_btn a').height();
	$('.tab_btn').css({top:(tabconH-tabtnH) / 2});
	//選項卡切換 
	var tabulW = $('.tab_con ul').width();//獲取內容塊的寬度
	var length = $('.tab_tle li').length;//獲取塊的個數
	var tabtleW = $('.tab_tle li').width()+1;//塊的寬度
	var tab_prev = $('.tab_btn .tab_prev');//左按鈕
	var tab_next = $('.tab_btn .tab_next');//右按鈕
	var count = 0;
	//按鈕的顏色
	if(count <= 0){
		count = 0;
		tab_next.removeAttr('style');
		tab_prev.css({background:'#000'});
	}
	$('.tab_tle li').on('click',function(){
		$index = $(this).index();//獲取索引值
		var count = $index
		//按鈕顏色開始
		if(count>=length-1){
			tab_prev.removeAttr('style');
			tab_next.css({background:'#000'});
		}else if(count<=0){
			count = 0;
			tab_next.removeAttr('style');
			tab_prev.css({background:'#000'});			
		}else if(count>0 && count < length){
			tab_next.removeAttr('style');
			tab_prev.removeAttr('style');	
		}
		//按鈕顏色結束
		//背景顏色移動和案例的移動
		$('.movebg').stop().animate({left:tabtleW*count})//背景顏色的移動
		$('.tab_li').stop().animate({left:tabulW*-count});//案例的動畫向左移動
		$(this).removeClass('now').addClass('now').siblings().removeClass();//列表菜單的文字顏色
	});
	//左按鈕切換
	tab_prev.on('click',function(){
		var index = $('.tab_tle li.now').index();
        var count = index;
		count--;
		//按鈕的顏色開始
		if(count<0){
			tab_next.removeAttr('style');
			tab_prev.css({background:'#000'});	
			alert('已經是第一張了');
			count = 0;
		}else if(count=0){
			tab_next.removeAttr('style');
			tab_prev.css({background:'#000'});
		}else if(count>0 && count<length){
			tab_next.removeAttr('style');
			tab_prev.removeAttr('style');	
		}
		//按鈕的顏色結束
		//背景顏色移動和案例的移動
		$('.movebg').stop().animate({left:tabtleW*count});
		$('.tab_li').stop().animate({left:tabulW*-count});
		$('.tab_tle li').eq(count).removeClass('now').addClass('now').siblings().removeClass('now');
	});
	//右按鈕切換
	tab_next.click(function(){
		var index =$('.tab_tle li.now').index();
        var count = index;
		count++;
		//按鈕的顏色開始
		if(count >= length){
			alert('已經是最后一張了');
			return false;
		}else if(count>=length-1){
			tab_prev.removeAttr('style');
			tab_next.css({background:'#000'});
		}else if(count>0 && count<length){
			tab_next.removeAttr('style');
			tab_prev.removeAttr('style');	
		}
		//按鈕的顏色結束
		//背景顏色移動和案例的移動
		$('.movebg').stop().animate({left:tabtleW*count});
		$('.tab_li').stop().animate({left:tabulW*-count});//案例的動畫向左移動
		$('.tab_tle li').eq(count).removeClass('now').addClass('now').siblings().removeClass('now');
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字切換 文字選項卡 背景切換 大圖切換 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子