本文实例讲述了jQuery实现自动切换播放的经典滑动门效果。分享给大家供大家参考。具体如下:
这是一个滑动门代码,从外观上看,简洁经典,似乎与平时见到的滑动门没什么区别,不过它有一个重要的功能与众不同,那就是会自动切换【播放】滑动门的内容,像腾讯QQ登录后弹出的每日要闻一样,如果你再加以美化,那么就更完美无暇了。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/
具体代码如下:
autoTab,自动切换播放的滑动门 *{ 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} 1111 2222 3333 4444
- 1111
- 2222
- 3333
- 4444
希望本文所述对大家的jQuery程序设计有所帮助。



