迅卖商城960宽jquery焦点图轮播滚动切换特效代码

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

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

以下是迅卖商城960宽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" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为迅卖商城960宽jquery焦点图" />
<link rel=stylesheet type=text/css href="css/lanrenxixi.css">
<script type=text/javascript src="js/jquery.js"></script>
<script type=text/javascript src="js/lanrentuku.js"></script>
<title>迅卖商城960宽jquery焦点图</title>
</head>

<body style="text-align:center">
<!--js开始 -->
<div id=js class="js"><IMG alt="" src="images/01.jpg"> <IMG 
style="DISPLAY: none" alt="" src="images/02.jpg"> <IMG 
style="DISPLAY: none" alt="" src="images/03.jpg"> 
<div id=jsNav class=jsNav><a id=prev class=prevBtn 
href="javascript:void(0)"></a><a class="trigger imgSelected" 
href="javascript:void(0)">1</a><a class=trigger 
href="javascript:void(0)">2</a><a class=trigger 
href="javascript:void(0)">3</a><a id=next class=nextBtn 
href="javascript:void(0)"></a></div></div>
</body>
</html>

JS代码(lanrentuku.js):

//<![CDATA[$(function(){
	(function(){
	var curr = 0;
	$("#jsNav .trigger").each(function(i){
	$(this).click(function(){
	curr = i;
	$("#js img").eq(i).fadeIn("slow").siblings("img").hide();
	$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
	return false;
}
);
}
);
	var pg = function(flag){
	//flag:true��ʾǰ���� false��ʾ��if (flag){
	if (curr == 0){
	todo = 2;
}
else{
	todo = (curr - 1) % 3;
}
}
else{
	todo = (curr + 1) % 3;
}
$("#jsNav .trigger").eq(todo).click();
}
;
	//ǰ��$("#prev").click(function(){
	pg(true);
	return false;
}
);
	//��$("#next").click(function(){
	pg(false);
	return false;
}
);
	//�Զ���var timer = setInterval(function(){
	todo = (curr + 1) % 3;
	$("#jsNav .trigger").eq(todo).click();
}
,4000);
	//�����ͣ�ڴ�������ʱֹͣ�Զ���$("#jsNav a").hover(function(){
	clearInterval(timer);
}
,function(){
	timer = setInterval(function(){
	todo = (curr + 1) % 3;
	$("#jsNav .trigger").eq(todo).click();
}
,1500);
}
);
}
)();
}
);
	//]]>//����ͼ�� www.lanrentuku.com

CSS代码(lanrenxixi.css):

BODY{LINE-HEIGHT:1.5;FONT-FAMILY:Tahoma,Helvetica,Arial,sans-serif;COLOR:#333333;FONT-SIZE:12px}
A{COLOR:#333;TEXT-DECORATION:none}
A:hover{TEXT-DECORATION:underline}
.js{POSITION:relative;WIDTH:960px;HEIGHT:315px;margin:0 auto;}
.jsNav{BACKGROUND:url(../images/jsNav.png) no-repeat}
.prevBtn{BACKGROUND:url(../images/jsNav.png) no-repeat}
.nextBtn{BACKGROUND:url(../images/jsNav.png) no-repeat}
.imgSelected{BACKGROUND:url(../images/jsNav.png) no-repeat}
.jsNav{POSITION:absolute;WIDTH:125px;BOTTOM:10px;FONT-FAMILY:Arial,Helvetica,sans-serif;HEIGHT:30px;RIGHT:10px;FONT-WEIGHT:bold}
.jsNav A{TEXT-ALIGN:center;LINE-HEIGHT:30px;WIDTH:25px;FLOAT:left;VERTICAL-ALIGN:middle}
.prevBtn{DISPLAY:block;BACKGROUND-POSITION:0px -30px;HEIGHT:30px}
.nextBtn{DISPLAY:block;BACKGROUND-POSITION:-100px -30px;HEIGHT:30px}
.imgSelected{BACKGROUND-POSITION:1px -60px;COLOR:#000}

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