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

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="/jquery/xxk/hd/-03-24/492.html" target="_blank">jquery选项卡切换插件特效制作多个slider动画</a><br />· <a href="/jquery/xxk/hd/-03-24/490.html" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />· <a href="/jquery/xxk/qh/-09-28/213.html" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件</a><br />· <a href="/jquery/xxk/qh/-09-24/207.html" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />· <a href="/jquery/xxk/qh/-09-24/205.html" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡</a></dd><dd>· <a href="/js/xxk/qh/-03-12/398.html" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />· <a href="/js/xxk/qh/-08-06/106.html" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></dd><dd>· <a href="/flash/images/-03-11/388.html" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />· <a href="/flash/images/-03-03/378.html" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />· <a href="/flash/images/-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 οnclick="changeshow(1)" id="showtag1">维修项目</a> | <a οnclick="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>

如果觉得《jquery实现tab切换加自动滚动切换》对你有帮助，请点赞、收藏，并留下你的观点哦！