分享一款正益无线首页jQuery焦点图，带索引按钮，自动轮播切换特效焦点图代码。

在线预览    源码下载

实现的代码。

html代码：

<div id="slideBox" class="slideBox">
	<div class="hd">
		<ul><li></li><li></li><li></li></ul>
	</div>
	<div class="bd">
		<ul>
			<li style="background: url(images/banner2_1.jpg) 50% 0px no-repeat;">
				<div id="a3"></div>
				<div id="a4"></div>
				<div id="a5"></div>
			</li>
			<li style="background: url(images/banner4.png) 50% 0px no-repeat;">
				<div id="a12"></div>
					<div id="a11"></div>
			</li>
			<li class="banner1">
				<a href="http://www.w2bc.com" target="_blank" class="content1">
					<div id="a20"></div>
						<div class="b2_word">
							<var id="a21">为</var><span id="a23"></span><var id="a22">而生</var>
						</div>
					<div id="a24">AppCan引领企业进入移动管理新时代</div>
				</a>
			</li>
		</ul>    
	</div>
</div>

<script src="js/jquery.SuperSlide.2.1.1.js"></script> 
<script type="text/javascript">
// 轮播
$(".slideBox").slide({mainCell:".bd ul",effect:"leftLoop",autoPlay:true,
	startFun:function(i,c){
	del();
	switch(i){
				case 0:
						$("#a3").addClass('animation3');
						$("#a4").addClass('animation4');
						$("#a5").addClass('animation5');
						break;
				case 1:
						$("#a11").addClass('animation8');
						$("#a12").addClass('animation9');

						break;
				// case 2:
						// $("#a8").addClass('animation6');
						// $("#a9").addClass('animation7');
						// $("#a10").addClass('animation7');
						// break;
				case 2:
			 
					   $(".content1 #a20").addClass('animation20');
						$(".b2_word #a21").addClass('animation21');
						$(".b2_word #a22").addClass('animation21');
						$(".b2_word #a23").addClass('animation20');
						$(".content1 #a24").addClass('animation22');
						break;
				default:break;
			}
	}
});
</script>

via：http://www.w2bc.com/Article/45590

在线预览    源码下载