通用TAB-有自动轮换功能

最新推荐文章于 2024-07-07 23:10:31 发布

yjxf8285

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量356

点赞数

分类专栏： Javascript 文章标签： function timer class xhtml float html

本文链接：https://blog.csdn.net/yjxf8285/article/details/6917020

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

yjxf8285

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通用TAB-有自动轮换功能

通用TAB-有自动轮换功能 <!-- * { padding:0; margin:0; list-style:none; } .cur { color:#000; background-color:#FFF; } .red { font-size: 20px; font-weight: bolder;
复制链接

扫一扫