正文

JQ实现tab切换功能

譬如朝露 V管理员/ / 0 评论/ 877阅读
01 16

大家分享下JQ如何写tab切换几行代码就可以实现了，源码如下，当然样式比较丑，但这不不是关键的

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>

	<script src="jquery.js"></script>
</head>

<style>
	*{margin:0;padding: 0;}
	.box{
		margin: auto;
		width: 5000px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.container{
		width:61%;
		overflow: hidden;
		margin: auto;
		border: 5px solid #000;
		position: relative;
		top: 0;
		left: 0;
		height: 350px;
	}
	ul{
		list-style: none;

	}
	.item{
		float: left;
	}
	.item>li{
		width: 360px;
		height: 350px;
		margin: 0 15px;
		float: left;
	}
	.item_1>li{
		background-color: red;
		margin: 0 15px;
	}
	.item_2>li{
		background-color: green;
		margin: 0 15px;
	}
	.item_3>li{
		background-color: #000;
		margin: 0 15px;
	}
	.clearfix{
		zoom:1;
	}
	.clearfix:after{
		content: '';
		display: block;
		clear: both;
	}
	.contal{
		position: absolute;
		top: 35%;
		font-size: 60px;
		text-decoration: none;
	}
	.prev{
		left: 0;
	}
	.next{
		right: 0;
	}
</style>
<body>

	<div class="container">
		<div  class="clearfix box">
			<ul class="item item_1 clearfix">
				<li>11111</li>
				<li>1111</li>
				<li>1111</li>
			</ul>
			<ul class="item item_2 clearfix">
				<li>2222</li>
				<li>22222</li>
				<li>22222</li>
			</ul>
			<ul class="item item_3 clearfix">
				<li>3333</li>
				<li>3333</li>
				<li>33333</li>
			</ul>
		</div>
			<a href="javascript：;"  class="contal prev"><</a>
			<a href="javascript：;"  class="contal next">></a>
	</div>

	<script>
		var wid=$('.container .item_1').width();
		$('.container .next').click(function(){	
			var left=parseInt($('.box').css('left'));	
			$('.box').animate({'left':-wid+'px'},500,function(){				
				$('.box').append($('.box .item').eq(0));
				$('.box').css('left','0px')
			})
		})
		$('.container .prev').click(function(){	
			$('.box').prepend($('.box .item').eq(2));
			$('.box').css('left',-wid+'px');
			$('.box').animate({'left':'0px'},500)
		})
		function play(){
			timer=setInterval(function(){
				$('.container .next').trigger('click')
			},1000)
		}
		play();
		function stop(){
			clearInterval(timer)
		}
		$('.container').hover(stop,play)

	</script>
</body>
</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。