汽车网站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=utf-8" />
<link type="text/css" rel="stylesheet" href="./css/style.css" ignoreapd="1" />
<script type="text/javascript" src="./jquery/jquery-1.5.2.min.js" ignoreapd="1"></script>
<script type="text/javascript" src="./jquery/jquery.easing.1.3.js" ignoreapd="1"></script>

<script type="text/javascript" src="./jquery/slides.jquery.js" ignoreapd="1"></script>
<script type="text/javascript" src="./jquery/index.js" ignoreapd="1"></script>
<title>汽车网站jquery带进度条焦点图</title>

</head>
 
<body>
 
<div class="index-main-box">
  <div class="index-main">
    <div id="indexslider">
      <div class="index-img"><img src="images/W020130601531976409053.jpg" width='1440' height='639' border='0'/><img src="images/W020130528336296877550.jpg" width='1440' height='639' border='0'/><img src="images/W020130528336471099423.jpg" width='1440' height='639' border='0'/><img src="images/W020130528337125785402.jpg" width='1440' height='639' border='0'/><img src="images/W020130528337330006308.jpg" width='1440' height='639' border='0'/><img src="images/W020130528337513904941.jpg" width='1440' height='639' border='0'/></div>
      <ul class="index-pagination">
	  
       <li><a><div><span></span></div></a></li>
	   
       <li><a><div><span></span></div></a></li>
	   
       <li><a><div><span></span></div></a></li>
	   
       <li><a><div><span></span></div></a></li>
	   
       <li><a><div><span></span></div></a></li>
	   
       <li><a><div><span></span></div></a></li>
	   
      
       <li class="back"></li>
      </ul>
    </div>
    </div>
</div>
</body>
</html>

JS代码(index.js):

$(function(){
	$('#indexslider').slides({
	effect:'fade,fade',crossfade:true,container:'index-img',paginationClass:'index-pagination',preloadImage:'',//loading ͼƬ��ַ play:6000,fadeSpeed:500,pause:10,generatePagination:false,animationStart:function(current){
	$('.index-pagination span').stop().animate({
	width:0}
).hide();
}
,animationComplete:function(current){
	var $back=$('.back');
	var leftw=(current-1)*34;
	$back.animate({
	left:leftw}
,1000,'easeOutBack');
	$('.index-pagination li').eq(current-1).find('span').show().animate({
	width:30}
,6000);
}
,slidesLoaded:function(){
	$('.index-pagination li').eq(0).find('span').animate({
	width:30}
,6000);
}
}
);
}
)

CSS代码(style.css):

ul,li,form{margin:0px;padding:0px;}
.index-main{z-index:55;position:relative;width:980px;margin:0 auto;height:639px;}
.index-main-box{position:relative;display:block;overflow:hidden;height:639px;}
#indexslider{position:relative;width:1440px;left:50%;margin-left:-720px;height:639px;}
.index-img{display:block;width:1440px;height:639px;overflow:hidden;}
.index-img img{width:1440px;height:639px;}
.index-pagination{position:absolute;z-index:66;top:490px;left:50%;height:30px;width:210px;margin-left:-100px;text-align:center;}
.index-pagination li{display:inline-block;width:30px;position:relative;float:left;height:23px;margin-right:4px;overflow:hidden;background:url(../images/index-ar2r.png) -20px 0px no-repeat;}
.index-pagination li a{position:relative;z-index:666;display:block;padding:16px 0px 5px 0px;height:2px;color:#5f6a72;text-align:center;}
.index-pagination li a div{position:relative;z-index:555;display:block;height:2px;background:#c9242b;}
.index-pagination li a div span{position:absolute;top:0px;left:0px;height:2px;width:0px;background:#FFF;}
.index-pagination li a div em{position:absolute;display:none;width:27px;height:10px;background:url(../images/car-ico.png) no-repeat;top:-5px;left:1px;}
.index-pagination li.current a{color:#0b4da2;_color:#c9242b;}
.index-pagination li.back{background:url(../images/car-ico.png) no-repeat;display:block;position:absolute;width:27px;height:10px;left:0px;top:4px;z-index:444;}
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/

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