jquery图片滚动选项卡结合插件

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
#wrap_slide{width:251px;height:255px;position:relative;margin:40px auto 0 auto;}
.slide_box ul{border-bottom:2px solid #A8CF36;padding:5px 0 15px 2px;height:10px;}
.slide_box li{float:left;text-align:center;color:#555555;margin-right:1px;padding:0 1px;}
.slide_box li a{text-decoration:none;padding:0 1px;color:#555555;}
.slide_box li a.current{background-color:#AACF34;color:#fff;}
.slide_box li:hover{background-color:#AACF34;padding:0 1px;color:#ffffff;}
#slide{width:194px;height:203px;overflow:hidden;position:absolute;left:25px;top:45px;}
#slide p{margin:10px 0 0 0;font-size:12px;line-height:20px;color:#545454;text-align:center;}
#slide div{text-decoration:none;display:block;width:194px;height:203px;position:absolute;left:480px;}
#previous{width:12px;height:24px;line-height:99em;overflow:hidden;background:url(images/left.gif);position:absolute;left:5px;top:100px;cursor:pointer;}
*html #previous{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/left.gif', sizingMethod='crop');}
#next{width:12px;height:24px;line-height:99em;overflow:hidden;background:url(images/right.gif);position:absolute;left:230px;top:100px;cursor:pointer;}
*html #next{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/right.gif', sizingMethod='crop');}
</style>
<script type="text/javascript">
$(document).ready(function(){
	current = 1;
	button = 1;
	images = 6;
	width = 194;
	$('#p1').animate({"left":"0px"},400,"swing");
	$("#next").click(function(){
		button = current;
		current++
		if(current==(images + 1)){
			current = 1
		}
		animateLeft(current, button)
	});
	$("#previous").click(function(){
		button = current;
		current--
		if(current == 0){
			current = images
		}
		animateRight(current, button)
	});
	$("#abuttons li").mouseover(function(){
		button = current;
		clickButton = $(this).attr('id');
		current = parseInt(clickButton.slice(1));
		if(current > button){
			animateLeft(current, button)
		}
		if(current < button){
			animateRight(current, button)
		}
	});
	function animateLeft(current, button){
		$('#p' + current).css("left", width + "px");
		$('#p' + current).animate({"left": "0px"},400,"swing");
		$('#p' + button).animate({"left": -width + "px"},400,"swing");
		setbutton()
	}
	function animateRight(current, button) {
		$('#p' + current).css("left", -width + "px");
		$('#p' + current).animate({"left": "0px"},400,"swing");
		$('#p' + button).animate({"left": width + "px"},400,"swing");
		setbutton()
	}
	function setbutton(){
		$('#a' + button).children("a").removeClass("current");
		$('#a' + current).children("a").addClass("current");
	}
});
</script>
<div id="wrap_slide">
	<div class="slide_box">
		<ul id="abuttons">
			<li id="a1"><a class="current">IT家电</a></li>
			<li id="a2"><a>快消</a></li>
			<li id="a3"><a>交通</a></li>
			<li id="a4"><a>服饰</a></li>
			<li id="a5"><a>日化</a></li>
			<li id="a6"><a>其他</a></li>
		</ul>
	</div>
	<div id="slide">
		<div id="p1">
			<a target="_blank" href="http://www.51qianduan.com"><img src="images/1340009975.jpg" /></a>
			<p><strong>戴尔</strong><br />戴尔存钱罐：平台化社交引力</p>
		</div>
		<div id="p2">
			<a target="_blank" href="http://www.51qianduan.com"><img src="images/1344919279.png" /></a>
			<p><strong>美年达</strong><br />美年达开心果味研究院</p>
		</div>
		<div id="p3">
			<a target="_blank" href="http://www.51qianduan.com"><img src="images/1342421413.jpg" /></a>
			<p><strong>宝马</strong><br />宝马文化之旅</p>
		</div>
		<div id="p4">
			<a target="_blank" href="http://www.51qianduan.com"><img src="images/1341819635.jpg" /></a>
			<p><strong>贵人鸟</strong><br />贵人鸟“RUN中国更快乐”</p>
		</div>
		<div id="p5">
			<a target="_blank" href="http://www.51qianduan.com"><img src="images/1342151710.jpg" /></a>
			<p><strong>海飞丝</strong><br />海飞丝：中国达人秀3腾讯合作案例</p>
		</div>
		<div id="p6">
			<a target="_blank" href="http://www.51qianduan.com"><img src="images/1342421405.jpg" /></a>
			<p><strong>北大青鸟</strong><br />北大青鸟：人人都是学士后</p>
		</div>
	</div>
	<div id="previous">Previous</div>
	<div id="next">Next</div>
</div>