jQuery数字按钮切换焦点图轮播滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery数字按钮切换焦点图轮播滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=gb2312" />
<title>jQuery数字按钮切换焦点图</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/home.js"></script>
<link rel="stylesheet" type="text/css" href="css/home.css" />
<style type="text/css">
 #rotateAdv_1{position:relative;width:556px;height:275px;overflow:hidden}
 #playNum_1 li.curr{width:325px;background:#f60;}
  </style>
</head>
<body>
<center><br>
<div id="rotateAdv_1">
	<ol id="playShow_1">
		<li style="display: none;">
		<a href="#" target="_blank" title="办公室进口零食排行榜">
		<img src="images/20121130093054605.jpg" alt="办公室进口零食排行榜" /> </a></li>
		<li style="display:list-item;">
		<a href="#" target="_blank" title="过冬忙屯粮 抢疯了">
		<img src="images/2012120709550682.jpg" alt="过冬忙屯粮 抢疯了" /> </a></li>
		<li style="display: none; ">
		<a href="#" target="_blank" title="悦活进口牛奶送曲奇饼干">
		<img src="images/20121121094939845.jpg" alt="悦活进口牛奶送曲奇饼干" /> </a></li>
		<li style="display: none; ">
		<a href="#" target="_blank" title="休闲食品年终特惠 三重惊喜感恩回馈">
		<img src="images/20121204020723548.jpg" alt="休闲食品年终特惠 三重惊喜感恩回馈" /> </a>
		</li>
		<li style="display: none; ">
		<a href="#" target="_blank" title="冬季清洁风暴">
		<img src="images/20121130093501200.jpg" alt="冬季清洁风暴" /> </a></li>
		<li style="display: none; ">
		<a href="#" target="_blank" title="恒安厂商周 三大品牌联合满减">
		<img src="images/2012120501381151.jpg" alt="恒安厂商周 三大品牌联合满减" /> </a></li>
		<li style="display: none; ">
		<a href="#" target="_blank" title="有机食品 感恩有礼">
		<img src="images/2012112605301950.jpg" alt="有机食品 感恩有礼" /> </a></li>
		<li style="display: none; ">
		<a href="#" target="_blank" title="每周惊爆价">
		<img src="images/20121130053811876.jpg" alt="每周惊爆价" /> </a></li>
	</ol>
	<ul id="playNum_1">
		<li class data-num="1">1<span></span></li>
		<li class="curr" data-num="2">2<span>过冬忙屯粮 抢疯了</span></li>
		<li class data-num="3">3<span></span></li>
		<li class data-num="4">4<span></span></li>
		<li class data-num="5">5<span></span></li>
		<li class data-num="6">6<span></span></li>
		<li class data-num="7">7<span></span></li>
		<li class="edge" data-num="8">8<span></span></li>
	</ul>
	<span id="scroller-prev" class="scroller-prev arrow" style="left:-50px;">
	</span>
	<span id="scroller-next" class="scroller-next arrow" style="right:-50px;">
	</span></div>
<script type="text/javascript">
  var tt_1=0,n_1=0,count_1=8
  </script>
</center>
</body>
</html>

JS代码(home.js):

jQuery(function(){
	jQuery("#playNum_1 li").mouseover(function(){
	n_1 = jQuery(this).attr("data-num");
	show(n_1);
}
);
	tt_1 = setInterval("showAuto_1()",2000);
	//�����Զ�����ʱ��jQuery("#rotateAdv_1").hover(function(){
	clearInterval(tt_1);
	jQuery("#scroller-prev").animate({
	left:0}
,{
	queue:false,duration:200}
).unbind().click(function(){
	//������߰�ť����ʱ��n_1 = n_1 < 2 ? count_1:--n_1;
	show(n_1);
}
).bind("mouseover",function(){
	jQuery(this).addClass("prev-on");
}
).bind("mouseout",function(){
	jQuery(this).removeClass("prev-on");
}
);
	jQuery("#scroller-next").animate({
	right:0}
,{
	queue:false,duration:200}
).unbind().click(function(){
	//�����ұ߰�ť����ʱ��n_1 = n_1 > (count_1 - 1) ? 1:++n_1;
	show(n_1);
}
).bind("mouseover",function(){
	jQuery(this).addClass("next-on");
}
).bind("mouseout",function(){
	jQuery(this).removeClass("next-on");
}
);
}
,function(){
	jQuery("#scroller-prev").animate({
	left:-50}
,{
	queue:false,duration:200}
);
	//�����ұ߰�ť����ʱ��jQuery("#scroller-next").animate({
	right:-50}
,{
	queue:false,duration:200}
);
	//������߰�ť����ʱ��}
);
}
)function showAuto_1(){
	n_1 = n_1 > (count_1 - 1) ? 1:++n_1;
	show(n_1);
}
function show(n_1){
	jQuery("#playShow_1 li").eq(n_1-1).siblings().hide();
	jQuery("#playNum_1").find("span").html("");
	jQuery("#playNum_1 li").eq(n_1-1).addClass("curr").siblings().removeClass("curr");
	var title = jQuery("#playShow_1 li").eq(n_1-1).find("img").attr('alt');
	jQuery("#playShow_1 li").eq(n_1-1).fadeIn(300).children("a").attr("title",title);
	jQuery("#playNum_1 .curr").find("span").html(title).show();
}

CSS代码(home.css):

/* === **** ģ��ҳ�� CSS���� ***** ===== */
*{padding:0px;margin:0px;line-height:1.8em;}
body{font-family:Arial,Tahoma,"����";/*�������嶨�� */
font-size:12px;/*���ִ�С���� */
color:#606060;/*������ɫ���� */
}
ol,ul{list-style:none outside none}
img{border:0px}
}
.clear{clear:both;line-height:0;height:0;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/*�������*/
/*��ҳ�ֻ����,width=556px,height=250px*/
#rotateAdv_1 .arrow{position:absolute;margin-top:90px;width:50px;height:70px;filter:Alpha(Opacity=50);opacity:0.5;background-image:url(../images/arrow.gif);background-repeat:no-repeat;z-index:2;cursor:pointer}
#rotateAdv_1 .scroller-prev{left:-50px;background-position:-66px -10px;}
#rotateAdv_1 .scroller-next{right:-50px;background-position:-66px -100px;}
#rotateAdv_1 .prev-on{background-position:-5px -10px}
#rotateAdv_1 .next-on{background-position:-5px -100px}
/*����������ṹ�Ż���www.97zzw.com - 97վ����*/
#playShow_1{position:absolute;z-index:1;width:556px;height:250px;left:0;top:0;}
#playShow_1 img{width:556px;height:250px;}
#playNum_1{position:absolute;z-index:2;top:251px}
#playNum_1 li{float:left;width:32px;height:24px;line-height:24px;text-align:center;color:#fff;background:#bbb;border-right:1px solid #fc0;cursor:default}
#playNum_1 li.edge{border:none;}

附件:下载该文件资源,减少时间成本(增值服务)