jquery按钮控制选项卡背景滑动切换



113 449 150



特效描述:按钮控制 选项卡滑动 背景滑动切换,背景滑动,背景切换,选项卡切换,按钮控制,选项卡滑动。

代码结构

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

加群请备注:从官网了解到