jQuery渐变切换Banner焦点图轮播滚动切换特效代码

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

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

以下是 jQuery渐变切换Banner焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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">
<title>jQuery渐变切换Banner焦点图</title>
<link href="css/on_index.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bplayer.js" type="text/javascript"></script>
</head>
<body>
<br>
<div class="topvebanner">
  <div id="myjQuery">
    <div id="myjQueryContent">
      <div><a href="#" target="_blank"><img src="images/2011090222552984933.jpg" title="成功的设计从像素级细节开始"></a></div>
      <div class="smask"><a href="#" target="_blank"><img src="images/2011041202310199922.jpg" title="专注于高端的网络交互"></a></div>
      <div class="smask"><a href="#" target="_blank"><img src="images/2011041202254559558.jpg" title="做有思想的设计"></a></div>
      <div class="smask"><a href="#" target="_blank"><img src="images/services.jpg" title="专注于高端网站界面设计"></a></div>
      <div class="smask"><a href="#" target="_blank"><img src="images/design.jpg" title="只有设计才能站在更高的层面解决问题"></a></div>
    </div>
    <ul id="myjQueryNav">
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
</body>
</html>

JS代码(bplayer.js):

// JavaScript DocumentjQuery(function($){
	var index = 0;
	var maximg = 5;
	//$('<div id="flow"></div>').appendTo("#myjQuery");
	//滑动导航改变内容$("#myjQueryNav li").hover(function(){
	if(MyTime){
	clearInterval(MyTime);
}
index = $("#myjQueryNav li").index(this);
	MyTime = setTimeout(function(){
	ShowjQueryFlash(index);
	$('#myjQueryContent').stop();
}
,400);
}
,function(){
	clearInterval(MyTime);
	MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	index++;
	if(index==maximg){
	index=0;
}
}
,3000);
}
);
	//滑入 停止动画，滑出开始动画. $('#myjQueryContent').hover(function(){
	if(MyTime){
	clearInterval(MyTime);
}
}
,function(){
	MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	index++;
	if(index==maximg){
	index=0;
}
}
,3000);
}
);
	//自动播放var MyTime = setInterval(function(){
	ShowjQueryFlash(index);
	index++;
	if(index==maximg){
	index=0;
}
}
,3000);
}
);
	function ShowjQueryFlash(i){
	$("#myjQueryContent div").eq(i).animate({
	opacity:1}
,1000).css({
	"z-index":"1"}
).siblings().animate({
	opacity:0}
,1000).css({
	"z-index":"0"}
);
	//$("#flow").animate({
	left:652+(i*76) +"px"}
,300 );
	//滑块滑动$("#myjQueryNav li").eq(i).addClass("current").siblings().removeClass("current");
}

CSS代码(on_index.css):

@charset "utf-8";body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,table,td,div,input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal}
a img{border:0}
body{color:#333;text-align:center;font:12px "宋体";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.topvebanner{margin:0 auto;width:960px;height:300px;overflow:hidden;}
.topvebanner ul{margin:0;padding:0;}
#myjQuery{BACKGROUND:#000;OVERFLOW:hidden;WIDTH:960px;POSITION:relative;HEIGHT:300px;}
#myjQueryContent{OVERFLOW:hidden;WIDTH:960px;HEIGHT:300px;}
#myjQueryContent DIV{POSITION:absolute;HEIGHT:300px;}
#myjQueryContent .smask{Z-INDEX:-1;}
#myjQueryContent IMG{WIDTH:960px;HEIGHT:300px;border:0;}
#myjQueryNav{DISPLAY:block;OVERFLOW:hidden;WIDTH:81px;HEIGHT:8px;position:absolute;top:282px;right:10px;z-index:5;}
#myjQueryNav LI{DISPLAY:block;FLOAT:left;WIDTH:15px;CURSOR:pointer;HEIGHT:8px;TEXT-ALIGN:center;margin-left:1px;background:#666;color:#fff;}
#myjQueryNav .nbg{BACKGROUND:#666;}
#myjQueryNav A{DISPLAY:block;Z-INDEX:12;MARGIN:0px auto;TEXT-TRANSFORM:uppercase;WIDTH:45px;COLOR:#ffffff;LINE-HEIGHT:22px;POSITION:relative;HEIGHT:22px;z-index:20;}
#myjQueryNav .current{BACKGROUND:#347e0d;}
#myjQueryNav .current A{COLOR:#fff;}
#myjQuery #flow{background:url(../images/fcurrent.gif) no-repeat;margin-top:-33px;WIDTH:45px;HEIGHT:22px;Z-INDEX:22;left:652px;POSITION:absolute;}

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