JiaSale官网jquery焦点图轮播滚动切换特效代码

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

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

以下是 JiaSale官网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=GBK" />
    <title>JiaSale官网jquery焦点图</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.kinMaxShow-1.0.min.js" type="text/javascript"></script>
    <script src="js/banner.js" type="text/javascript"></script>
</head>
<body onload="pageInit()">
<!-- banner -->
<div class="banner">
	<div id="kinMaxShow">
		<div>
			<img src="images/banner-1.jpg" />
			<div>
				<div style="width:1000px; margin:auto; position:relative; height:480px">
					<img class="sub_1_1" src="images/sub_1_1.png"  />
					<img class="sub_1_2" src="images/sub_1_2.png" />
					<img class="sub_1_3" src="images/sub_1_3.png"  />
				</div>
			</div>
		</div>
		<div>
			<img src="images/banner-1.jpg" />
			<div>
				<div style="width:1000px; margin:auto; position:relative; height:480px">
					<img class="sub_2_1" src="images/sub_1_1.png"  />
					<img class="sub_2_2" src="images/sub_1_2.png" />
					<img class="sub_2_3" src="images/sub_1_3.png"  />
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

JS代码(banner.js):

$(function(){
	$("#kinMaxShow").kinMaxShow({
	height:466,button:{
	showIndex:false,normal:{
	background:'url(images/btn.png) no-repeat -14px 0',marginRight:'8px',border:'0',bottom:'53px',right:'0'}
,focus:{
	background:'url(images/btn.png) no-repeat 0 0',border:'0'}
}
,callback:function(index,action){
	switch(index){
	case 0:if(action=='fadeIn'){
	$(this).find('.sub_1_1').animate({
	left:'-40px'}
,600)$(this).find('.sub_1_2').animate({
	top:'100px'}
,600)$(this).find('.sub_1_3').animate({
	top:'223px'}
,700)}
else{
	$(this).find('.sub_1_1').animate({
	left:'-150px'}
,600)$(this).find('.sub_1_2').animate({
	top:'40px'}
,600)$(this).find('.sub_1_3').animate({
	top:'320px'}
,600)}
;
	break;
	case 1:if(action=='fadeIn'){
	$(this).find('.sub_2_1').animate({
	left:'-40px'}
,600)$(this).find('.sub_2_2').animate({
	top:'100px'}
,600)$(this).find('.sub_2_3').animate({
	top:'223px'}
,700)}
else{
	$(this).find('.sub_2_1').animate({
	left:'-150px'}
,600)$(this).find('.sub_2_2').animate({
	top:'40px'}
,600)$(this).find('.sub_2_3').animate({
	top:'320px'}
,600)}
;
	break;
}
}
}
);
}
);
	/* 下面是ul外面套DIV 不用可删除 */
function pageInit(){
	var uls = document.getElementsByTagName("ul");
	var operUL;
	for(var i = 0;
	i < uls.length;
	i++){
	var curUL = uls[i];
	if(curUL.className == "kinMaxShow_button"){
	operUL = curUL;
	curUL.parentNode.removeChild(curUL);
	break;
}
}
if(operUL){
	var cdiv = document.createElement("div");
	cdiv.className = "banner-w1000";
	cdiv.appendChild(operUL);
	document.getElementById("kinMaxShow").appendChild(cdiv);
}
}

CSS代码(index.css):

/* ȫ��ͨ����ʽ */
*{margin:0;padding:0;font-family:Tahoma,"����";}
body,p,dl,dt,dd,ul,ol,li,form,th,td,table,label{margin:0;padding:0;border:0;}
body{font-size:12px;color:#333}
h1,h2,h3,h4,h5,h6,h7,h8{font-size:12px;font-weight:normal}
body{background:#FFF}
ul,ol{list-style:none}
img{border:none;vertical-align:middle;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:none;}
button,input,select,textarea{margin:0;padding:0;font-size:100%;vertical-align:middle}
button{cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
.clear{clear:both}
.clearfix:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
/* �õ� */
.index-focus{width:980px;margin:auto;padding-top:105px}
#focus{width:904px;height:240px;margin:auto;overflow:hidden;position:relative;}
#focus ul{height:380px;position:absolute;margin-left:-27px}
#focus ul li{float:left;width:904px;height:240px;overflow:hidden;position:relative;}
#focus ul li div{float:left;width:175px;height:120px;background:url(../images/index/new-bg.png);margin-left:50px;_display:inline}
#focus ul li a{display:block;width:163px;height:108px;background-position:center;background-repeat:no-repeat;margin:6px 0 0 6px}
#focus .btnBg{display:none}
#focus .btn{position:absolute;width:880px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:center;}
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin:0 2px;cursor:pointer;background:#fff;}
#focus .btn span.on{background:#fff;}
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}
.new-indexlist{margin:0 0 35px -34px;}
.new-indexlist li{float:left;width:167px;line-height:1.4;margin:0 0 30px 34px;_display:inline}
.new-indexlist li div{height:98px;border:#d3d3d3 1px solid;background-position:center;background-repeat:no-repeat;margin-bottom:10px}
.new-indexlist li a{display:block;height:155px;color:#666}
.new-indexlist li a:hover{text-decoration:underline}
.new-indexlist li b{color:#d8151b}
.banner #kinMaxShow .banner-w1000{width:1000px;margin:auto;position:relative;height:14px;z-index:1000}
#kinMaxShow{display:none;}
#kinMaxShow .sub_1_1,#kinMaxShow .sub_2_1{display:block;position:absolute;left:-150px;top:62px;}
#kinMaxShow .sub_1_2,#kinMaxShow .sub_2_2{display:block;position:absolute;left:535px;top:40px;}
#kinMaxShow .sub_1_3,#kinMaxShow .sub_2_3{display:block;position:absolute;left:685px;top:110px;}

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