新浪汽车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>
<meta name=Keywords content="jquery代码,焦点图,广告代码,jquery特效">
<meta name=Description content="">
<link rel=stylesheet type=text/css href="css/newstyles4.css">
<script type=text/javascript src="js/jq142.js"></script>
<script type=text/javascript src="js/2011home_cm.js"></script>
</head>
<body>
<div class="xxx">
  <div class="zztuku">
    <div class="aL f">
      <H6>焦点图片</H6>
      <dl>
        <DT><I class=c>1</I><I>2</I><I>3</I><I>4</I></DT>
        <DD><A title="文章标题一" href="#" target=_blank> <IMG alt="文章标题一" src="images/1.jpg" width=310  height=206></A>
          <P><A href="#" target=_blank>文章标题一</A></P>
        </DD>
        <DD class=n><A title="文章标题二" href="#" target=_blank> <IMG alt="文章标题二" src="images/2.jpg" width=310 height=206></A>
          <P><A href="#" target=_blank>文章标题二</A></P>
        </DD>
        <DD class=n><A title="文章标题三" href="#" target=_blank> <IMG alt="文章标题三" src="images/3.jpg" width=310   height=206></A>
          <P><A href="#" target=_blank>文章标题三</A></P>
        </DD>
        <DD class=n><A title="文章标题四" href="#" target=_blank> <IMG alt="文章标题四" src="images/4.jpg" width=310 height=206></A>
          <P><A href="#" target=_blank>文章标题四</A></P>
        </DD>
      </dl>
    </div>
  </div>
</div>
</body>
</html>

JS代码(2011home_cm.js):

jQuery(function(){
	var len_1 = jQuery(".f dt i").length;
	var index_1 = 1;
	if(len_1!=0){
	jQuery(".f dt i").click(function(){
	index_1 = jQuery(".f dt i").index(this);
	showImg(index_1);
}
);
	jQuery('.f').hover(function(){
	if(MyTime){
	clearInterval(MyTime);
}
}
,function(){
	MyTime = setInterval(function(){
	showImg(index_1)index_1++;
	if(index_1==len_1){
	index_1=0;
}
}
,4000);
}
);
	var MyTime = setInterval(function(){
	showImg(index_1)index_1++;
	if(index_1==len_1){
	index_1=0;
}
}
,4000);
}
function showImg(i){
	jQuery(".f dd").hide();
	jQuery(".f dd").stop(true,true).eq(i).fadeIn(500);
	jQuery(".f dt i").removeClass("c");
	jQuery(".f dt i").eq(i).addClass("c")}
;
}
);

CSS代码(newstyles4.css):

.xxx{width:100%;}
.zztuku{width:310px;margin:0 auto;}
P{PADDING-BOTTOM:0px;FONT-STYLE:normal;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-SIZE:12px;PADDING-TOP:0px}
DL{PADDING-BOTTOM:0px;FONT-STYLE:normal;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-SIZE:12px;PADDING-TOP:0px}
DT{PADDING-BOTTOM:0px;FONT-STYLE:normal;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-SIZE:12px;PADDING-TOP:0px}
DD{PADDING-BOTTOM:0px;FONT-STYLE:normal;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-SIZE:12px;PADDING-TOP:0px}
H6{PADDING-BOTTOM:0px;FONT-STYLE:normal;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-SIZE:12px;PADDING-TOP:0px}
I{PADDING-BOTTOM:0px;FONT-STYLE:normal;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;FONT-SIZE:12px;PADDING-TOP:0px}
IMG{BORDER-BOTTOM-STYLE:none;BORDER-LEFT-STYLE:none;DISPLAY:block;BORDER-TOP-STYLE:none;BORDER-RIGHT-STYLE:none}
.n{DISPLAY:none}
.aL{DISPLAY:inline;WIDTH:310px;}
.f I{DISPLAY:inline;FLOAT:left}
.p{LINE-HEIGHT:24px;COLOR:#9f9e9e}
.f H6{LINE-HEIGHT:30px;PADDING-LEFT:10px;BACKGROUND:url(../images/titleA.png) #0ea3da no-repeat;HEIGHT:30px;COLOR:#fff;FONT-SIZE:14px;OVERFLOW:hidden;_line-height:32px}
.f P{TEXT-ALIGN:center;LINE-HEIGHT:38px;BACKGROUND-COLOR:#676767;HEIGHT:38px;BORDER-TOP:#0ea3da 2px solid}
.f P A{COLOR:#fff;FONT-SIZE:14px}
.f P A:hover{COLOR:#fff}
.f DL{POSITION:relative}
.f DT{Z-INDEX:99;POSITION:absolute;RIGHT:2px;TOP:189px}
.f I{TEXT-ALIGN:center;LINE-HEIGHT:16px;BACKGROUND-COLOR:#676767;WIDTH:16px;FONT-FAMILY:Arial;HEIGHT:16px;COLOR:#fff;CURSOR:pointer;MARGIN-RIGHT:4px}
.f .c{BORDER-BOTTOM:#0ea3da 2px solid;POSITION:relative;BACKGROUND-COLOR:#0ea3da;COLOR:#fff8af;BORDER-TOP:#0ea3da 5px solid;FONT-WEIGHT:bold;TOP:-5px}

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