jquery实现tab切换加自动滚动切换

最新推荐文章于 2022-06-24 11:23:11 发布

weixin_30354675

最新推荐文章于 2022-06-24 11:23:11 发布

阅读量671

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/henshui/archive/2013/04/25/3043652.html

本文介绍了一款jQuery选项卡插件及其多种特效应用，包括自动切换、内容滑动等，并展示了如何通过代码实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、用插件switchTab

$("#switchBox7").switchTab({defaultIndex: "1", titCell: "dt span", mainCell: "dd", interTime: 5000});

<h3>7，每隔5000毫秒自动切换</h3>
	<dl class="switchBox" id="switchBox8">
		<dt>
			<span>jquery 特效</span>
			<span>javascript特效</span>
			<span>flash特效</span>
		</dt>
		<dd>
			· <a href="http://www.jsfoot.com/jquery/xxk/hd/2012-03-24/492.html" target="_blank">jquery选项卡切换插件特效制作多个slider动画</a><br />
			· <a href="http://www.jsfoot.com/jquery/xxk/hd/2012-03-24/490.html" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.jsfoot.com/jquery/xxk/qh/2011-09-28/213.html" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件</a><br />
			· <a href="http://www.jsfoot.com/jquery/xxk/qh/2011-09-24/207.html" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.jsfoot.com/jquery/xxk/qh/2011-09-24/205.html" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.jsfoot.com/js/xxk/qh/2012-03-12/398.html" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.jsfoot.com/js/xxk/qh/2011-08-06/106.html" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.jsfoot.com/flash/images/2012-03-11/388.html" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.jsfoot.com/flash/images/2012-03-03/378.html" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.jsfoot.com/flash/images/2012-03-03/376.html" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
	</dl>
	<blockquote>
		<h5>调用代码</h5>
		<code>$("#switchBox7").switchTab({defaultIndex: "1", titCell: "dt span", mainCell: "dd", interTime: 5000});</code>
	</blockquote>

2、用原来与的一个函数来改的

function changeshow(m){
	for (var k=1; k<3; k++)
	{$('#picshow'+k).hide();
	$('#showtag'+k).addClass('nomarl');
	}
	$('#picshow'+m).show();
	$('#showtag'+m).removeClass('active');
	m++;
	m=(m>=3)?1:m;
	cstep=(clearTimeout(cstep))?setTimeout("changeshow("+m+")",3000):setTimeout("changeshow("+m+")",3000);
}

var cstep;
	  changeshow(1);

$("#switchBox7 ul").hover(
       function(){ cstep=(clearTimeout(cstep));
       
       },
       function(){
       
       changeshow( $("#switchBox7 ul").index(this)+1
                  )
       }
       );

html

 <div class="fl zh"> <a onclick="changeshow(1)" id="showtag1">维修项目</a> | <a onclick="changeshow(2)" id="showtag2">公示公告</a></div>
<ul id="picshow1">
          <li><a href=#>热水器维修</a></li>
          <li><a href=#>热水器维修</a></li>
          <li><a href=#>热水器维修</a></li>
          <li><a href=#>热水器维修</a></li>
          <li><a href=#>热水器维修</a></li>
        </ul>
        <ul id="picshow2">
          <li>公告dfdsf</li>
          <li>公告dfdsf</li>
          <li>公告dfdsf</li>
          <li>公告dfdsf</li>
        </ul>

转载于:https://www.cnblogs.com/henshui/archive/2013/04/25/3043652.html