jQuery标签导航banner焦点图片切换插件blockSlide

使用方法：

引入核心CSS样式文件

/* myjQuery */
#myjQuery{padding:5px;background:#e51c05;width:488px;position:relative;height:275px;overflow:hidden;margin:60px auto 0 auto;}
#myjQueryContent{border:solid 1px #fff;width:486px;height:224px;overflow:hidden;}
#myjQueryContent div{position:absolute;height:224px;}
#myjQueryContent img{width:486px;height:224px;}
#myjQuery ul{border-top:#ffffff 2px solid;display:block;overflow:hidden;width:488px;height:47px;}
#myjQuery ul li{display:block;float:left;width:122px;cursor:pointer;padding-top:7px;height:40px;text-align:center;}
#myjQuery ul li a{display:block;width:85px;margin:0px auto;height:32px;line-height:16px;overflow:hidden;color:#ffffff;position:relative;z-index:12;text-decoration:none;}
#myjQuery ul li.current a{color:#f6821e;}
#myjQuery #flow{margin-top:-47px;z-index:10;background:url(images/fcurrent.gif);left:5px;width:122px;position:absolute;height:47px;overflow:hidden;}

引入jQuery库文件、插件JS文件

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

插件初始化、参数配置

$(document).ready(function(){
	
	$("#myjQuery").blockSlide({
		speed : "normal",
		num : 4,
		timer : 4000,
		flowSpeed :300
	});
	
});

HTML结构

<div id="myjQuery">
	<div id="myjQueryContent">
		<div style="z-index:9;"><a href="http://www.sucainiu.com/"><img width="486" height="224" src="images/1.jpg" alt="岁末巨献,牛气冲天！" /></a></div>
		<div><a href="http://www.sucainiu.com/"><img width="486" height="224" src="images/2.jpg" alt="给闺蜜的礼物,两件新衣80元起" /></a></div>
		<div><a href="http://www.sucainiu.com/"><img width="486" height="224" src="images/3.jpg" alt="09运动新品,新年8折起！" /></a></div>
		<div><a href="http://www.sucainiu.com/"><img width="486" height="224" src="images/4.jpg" alt="新年给家人一次,奢华的享受" /></a></div>
	</div>
	<ul>
		<li class="current"><a href="http://www.sucainiu.com/">岁末巨献<br/>牛气冲天！</a></li>
		<li><a href="http://www.sucainiu.com/">给闺蜜的礼物<br/>两件新衣80元起</a></li>
		<li><a href="http://www.sucainiu.com/">09运动新品<br/>新年8折起！</a></li>
		<li><a href="http://www.sucainiu.com/">新年给家人一次<br/>奢华的享受</a></li>
	</ul>
</div>