CSS+Jquery打造的一款可以自动切换(播放)的TAB滑动门效果-白红宇

CSS+Jquery打造的一款可以自动切换(播放)的TAB滑动门效果

阅读量：4979 次

发布时间：2019-06-12

本文共 1934 字，大约阅读时间需要 6 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>CSS+Jquery打造的一款可以自动切换(播放)的TAB滑动门效果丨芯晴网页特效丨CsrCode.Cn</title>

</head>

<style>

*{ margin:0; padding:0;}

ul{ list-style:none}

body{ font-size:12px}

#tabMenus{ width:400px; margin:100px auto 0 auto;overflow:hidden; border:#ccc solid 1px; border-bottom:none;}

#tabMenus li{ float:left; width:100px; height:25px; line-height:25px; background:#ccc; text-align:center}

#tabMenus li a{ display:block; height:100%; color:#000000; text-decoration:none}

#tabMenus li.current{background:#fff}

#tabMenus li.usual{background:#ccc;}

#tabCons{ clear:both;width:400px; margin:0 auto; overflow:hidden; border:#ccc solid 1px; border-top:none}

#tabCons .con{ float:left; padding:10px; width:380px; display:none}

</style>

$(document).ready(function(){

var j=0;

$("#tabMenus li:first").addClass("current");

$("#tabCons div:first").show();

$("#tabMenus li").each(function(i){

$(this).click(function(){

$(this).addClass("current").siblings().removeClass();

$("#tabCons > div").hide();

$("#tabCons div:eq(" + i + ")").show();

})

var t=setInterval(function(){

$("#tabMenus li:eq("+j+")").trigger("click");

if(j<3){

j++;

}else{

j=0;

}

},1000)

})

</script>

<body>

</ul>

</div>

</body>

</html>

<br>如果不显示预览效果，请刷新一下本页面先~~~<br>所需js文件：<a href="//imagesforcode/jquery.js">jquery.js</a><hr><p align="center"><font color=black>本特效由 <a href="" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>

转载于:https://www.cnblogs.com/xx22s/archive/2012/10/31/2748907.html

你可能感兴趣的文章