通用TAB-有自动轮换功能
来源：互联网 发布：python吊死鬼游戏 编辑：程序博客网 时间：2024/05/17 08:10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>通用TAB-有自动轮换功能</title><script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script><style type="text/css"><!--* {padding:0;margin:0;list-style:none;}.cur {color:#000;background-color:#FFF;}.red {font-size: 20px;font-weight: bolder;}#lxfTab-click {-moz-border-radius:5px;background-color:#069; width:600px;overflow:hidden;padding:2px;margin-top:20px;margin-left:auto;margin-right:auto;}#lxfTab-click .title {color:#FFF;}#lxfTab-click .title li {float:left;padding:1px;cursor:pointer;width:40px;margin:8px 0 8px 8px;border:1px solid #FFF;-moz-border-radius:5px;text-align:center;}#lxfTab-click .content {width:600px;float:left;}#lxfTab-click .content li {word-wrap:break-word;background-color:#FFF;padding:6px;-moz-border-radius:5px;width: 572px;margin-top: 0px;margin-right: 8px;margin-bottom: 8px;margin-left: 8px;}--></style><script>$(function() {$("#lxfTab-click .title li:first").addClass("cur");$("#lxfTab-click .content li:not(:first)").hide();$("#lxfTab-click .title li").click(function() {var index = $("#lxfTab-click .title li").index($(this));$("#lxfTab-click .title li").removeClass("cur");$(this).addClass("cur");$("#lxfTab-click .content li").hide().eq(index).fadeIn("fast");$(".now").text(index + 1);});/* 自动轮换*/var i = -1;//设置起始位置var speed = 2000;//设置轮换速度var n = $("#lxfTab-click .title li").length - 1;function autoroll() {if(i >= n) {i = -1;}i++;$("#lxfTab-click .title li").removeClass("cur").eq(i).addClass("cur");$("#lxfTab-click .content li").hide().eq(i).fadeIn("fast");timer = setTimeout(autoroll, speed);};/* 鼠标悬停即停止自动轮换 */function stoproll() {$("#lxfTab-click li").hover(function() {clearTimeout(timer);i = $(this).prevAll().length;}, function() {timer = setTimeout(autoroll, speed);});};autoroll();//执行自动轮换函数stoproll();//启动悬停功能});</script></head><body><div id="lxfTab-click"><ul class="title"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="LRbutton"><ul><li></li><li></li><li></li></ul></div><ul class="content"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body></html>
