百度校园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" />
<title>百度校园jQuery焦点图 </title>
<script type="text/javaScript" src="js/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<div class="w1003 main">
	<div class="boxa" style="margin-top:10px;">
		<link rel="stylesheet" type="text/css" href="css/sliderman.css" />
		<script type="text/javascript" src="js/picShow.js"></script>
		<link href="css/main.css" rel="stylesheet" type="text/css" />
		<div class="w733 fl" style="height:337px;">
			<div class="highlight_tip">
				<ul class="tab clear">
					<li class="tab1 navigation">
					<a href="#" target="_blank">
					<img src="images/up_5281c48354ddb.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab2 navigation">
					<a href="#" target="_blank">
					<img src="images/up_529707516da03.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab3 navigation">
					<a href="#" target="_blank">
					<img src="images/up_5289cedae6005.png" width="99" height="48" /></a>
					</li>
					<li class="tab4 navigation">
					<a href="#" target="_blank">
					<img src="images/up_52689f01d614e.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab5 navigation">
					<a href="#" target="_blank">
					<img src="images/up_529703723c8d7.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab6 navigation">
					<a href="#" target="_blank">
					<img src="images/up_50594c1f97227.jpg" width="99" height="48" /></a>
					</li>
					<li class="tab7 navigation">
					<a href="#" target="_blank">
					<img src="images/up_514fc23184f3d.jpg" width="99" height="48" /></a>
					</li>
				</ul>
			</div>
			<div class="v_content_list">
				<ul class="clear">
					<li></a>
					<a href="#" target="_blank">
					<img src="images/up_5281c48354ddb.jpg" width="733" height="337" /></a></li>
					<li><a href="#" target="_blank">
					<img src="images/up_529707516da03.jpg" width="733" height="337" /></a></li>
					<li><a href="#" target="_blank">
					<img src="images/up_5289cedae6005.png" width="733" height="337" /></a></li>
					<li>
					<a href="#" target="_blank">
					<img src="images/up_52689f01d614e.jpg" width="733" height="337" /></a></li>
					<li>
					<a href="#" target="_blank">
					<img src="images/up_529703723c8d7.jpg" width="733" height="337" /></a></li>
					<li><a href="#" target="_blank">
					<img src="images/up_50594c1f97227.jpg" width="733" height="337" /></a></li>
					<li><a href="#" target="_blank">
					<img src="images/up_514fc23184f3d.jpg" width="733" height="337" /></a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
</body>
</html>

JS代码(picShow.js):

$(document).ready(function(){
	var picWidth = $(".v_content_list").width();
	//获取显示焦点图的宽度var len = $(".v_content_list ul li").length;
	//获取焦点图个数var img_container = $(".v_content_list ul");
	//定义变量var button_container = $(".highlight_tip li");
	//定义变量var index = 0;
	//初始化index=0//设置tab按钮的背景透明度为0.5//$(".highlight_bg").css("opacity","0.5")//为tab按钮添加鼠标滑入事件，以显示相应的内容button_container.mouseenter(function(){
	index = button_container.index(this);
	showPics(index);
}
).eq(0).trigger("mouseenter");
	//计算出外围ul元素的宽度img_container.css("width",picWidth * (len));
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放$(".v_content_list").hover(function(){
	clearInterval(picTimer);
}
,function(){
	picTimer = setInterval(function(){
	showPics(index);
	index++;
	if(index == len){
	index = 0;
}
}
,4000);
	//4000代表自动播放的间隔，单位：毫秒，1秒=1000毫秒}
).trigger("mouseleave");
	//显示图片函数，根据接收的index值显示相应的内容function showPics(index){
	//默认效果var nowLeft = -index*picWidth;
	//根据index值计算ul元素的left值//alert(nowLeft);
	img_container.stop(true,false).animate({
	"left":nowLeft}
,300);
	//通过animate()调整ul元素滚动到计算出的positionbutton_container.eq(index).addClass("current").siblings().removeClass("current");
	//为当前的tab按钮添加class="current"//button_container.eq(index).stop(true).animate({
	"opacity":"1","top":-5+"px"}
,300).siblings().stop(true).animate({
	"opacity":"0.6","top":10+"px"}
,300);
	//为当前的tab按钮添加选中的效果}
}
)

CSS代码(main.css):

@charset "utf-8";

CSS代码(sliderman.css):

html,form,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}
body{margin:0;padding:0;border:none;font-size:12px;line-height:150%;color:#676767;background:#fff;font-family:Arial,Helvetica,sans-serif;/*font-family:'\5FAE\8F6F\96C5\9ED1';*/
font-family:'\5B8B\4F53';}
img{margin:0;padding:0;border:none;}
ol,ul,li,dl,dt,dd{margin:0;padding:0;list-style:none;}
.fl{float:left;}
.fr{float:right;}
a{color:#0068CC;text-decoration:none;}
a:hover{color:#0151A7;text-decoration:underline;}
.w1003{width:800px;margin:0 auto;}
.w733{width:733px;overflow:hidden;}
.w256{width:256px;overflow:hidden;}
.highlight_tip{padding:7px 0 0;z-index:10;position:relative;position:absolute;left:0;bottom:0;width:733px;height:57px;}
.highlight_tip ul li{position:absolute;z-index:20;top:10px;cursor:pointer;}
ul li.tab1{left:8px}
ul li.tab2{left:110px}
ul li.tab3{left:212px}
ul li.tab4{left:316px}
ul li.tab5{left:419px}
ul li.tab6{left:524px}
ul li.tab7{left:628px}
.v_content_list ul{position:absolute}
.v_content_list ul li{width:733px;float:left;overflow:hidden;position:relative}
li.navigation img{width:95px;border:1px #fff solid;position:absolute;opacity:0.5;-moz-opacity:0.5;-webkit-opacity:0.5;filter:alpha(opacity=50);}
li.current img{border:2px #0076A8 solid;opacity:1;-moz-opacity:1;-webkit-opacity:1;filter:alpha(opacity=100)}
#slider_container_2{float:left;margin:0 0 0 -15px;padding:15px;width:700px;background:url(../img/bg.png) no-repeat 0 0;}
.SliderName_2{float:left;height:337px;overflow:hidden;}
.SliderNamePrev_2{background:url(../img/left.png) no-repeat left center;width:50px;height:450px;display:block;position:absolute;top:0;left:0;text-decoration:none;}
.SliderNameNext_2{background:url(../img/right.png) no-repeat right center;width:50px;height:450px;display:block;position:absolute;top:0;right:0;text-decoration:none;}
.SliderName_2Description{padding:10px;font-family:Tahoma,Arial,Helvetica;font-size:14px;line-height:30px;letter-spacing:1px;text-align:center;color:#ffffff;text-shadow:0 1px 3px #000000;}
#SliderNameNavigation_2{margin:0;padding:0;text-align:center;position:absolute;bottom:0px;z-index:100;left:9px;}
#SliderNameNavigation_2 a:link,#SliderNameNavigation_2 a:active,#SliderNameNavigation_2 a:visited,#SliderNameNavigation_2 a:hover{margin:0;padding:0;font-size:0;line-height:0;text-decoration:none;}
#SliderNameNavigation_2 a img{border:1px #fff solid;width:95px;opacity:0.5;-moz-opacity:0.5;-webkit-opacity:0.5;filter:alpha(opacity=50);height:44px;}
#SliderNameNavigation_2 a.active img{border:2px #0076A8 solid;opacity:1;-moz-opacity:1;-webkit-opacity:1;filter:alpha(opacity=100);}
div.w733{position:relative;left:0px;top:0px;}

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