Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<!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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<title>jquery全屏banner自动轮播切换</title>
+
<title>百度校园jQuery焦点图</title>
-
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"/></script>
+
<script type="text/javaScript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
-
<script type="text/javascript">
+
<style>
-
function banner(){
+
html, form, h1, h2, h3, h4, h5, h6, p{margin:0; padding:0;}
-
var bn_id = 0;
+
body {
-
var bn_id2= 1;
+
margin:0; padding:0; border:none;
-
var speed33=5000;
+
font-size:12px;
-
var qhjg = 1;
+
line-height:150%;
-
var MyMar33;
+
color:#676767;
-
$("#banner .d1").hide();
+
background:#fff;
-
$("#banner .d1").eq(0).fadeIn("slow");
+
font-family:Arial, Helvetica, sans-serif;
-
if($("#banner .d1").length>1)
+
/*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
{
{
-
$("#banner_id li").eq(0).addClass("nuw");
+
border: 1px #fff solid;
-
function Marquee33(){
+
width: 95px;
-
bn_id2 = bn_id+1;
+
opacity:0.5;
-
if(bn_id2>$("#banner .d1").length-1)
+
-moz-opacity:0.5;
-
{
+
-webkit-opacity:0.5;
-
bn_id2 = 0;
+
filter:alpha(opacity=50);
-
}
+
height: 44px;
-
$("#banner .d1").eq(bn_id).css("z-index","2");
+
-
$("#banner .d1").eq(bn_id2).css("z-index","1");
+
-
$("#banner .d1").eq(bn_id2).show();
+
-
$("#banner .d1").eq(bn_id).fadeOut("slow");
+
-
$("#banner_id li").removeClass("nuw");
+
-
$("#banner_id li").eq(bn_id2).addClass("nuw");
+
-
bn_id=bn_id2;
+
-
};
+
-
MyMar33=setInterval(Marquee33,speed33);
+
-
$("#banner_id li").click(function(){
+
-
var bn_id3 = $("#banner_id li").index(this);
+
-
if(bn_id3!=bn_id&&qhjg==1)
+
-
{
+
-
qhjg = 0;
+
-
$("#banner .d1").eq(bn_id).css("z-index","2");
+
-
$("#banner .d1").eq(bn_id3).css("z-index","1");
+
-
$("#banner .d1").eq(bn_id3).show();
+
-
$("#banner .d1").eq(bn_id).fadeOut("slow",function(){qhjg = 1;});
+
-
$("#banner_id li").removeClass("nuw");
+
-
$("#banner_id li").eq(bn_id3).addClass("nuw");
+
-
bn_id=bn_id3;
+
-
}
+
-
})
+
-
$("#banner_id").hover(
+
-
function(){
+
-
clearInterval(MyMar33);
+
-
}
+
-
,
+
-
function(){
+
-
MyMar33=setInterval(Marquee33,speed33);
+
-
}
+
-
)
+
}
}
-
else
+
#SliderNameNavigation_2 a.active img
{
{
-
$("#banner_id").hide();
+
border: 2px #0076A8 solid;
 +
opacity:1;
 +
-moz-opacity:1;
 +
-webkit-opacity:1;
 +
filter:alpha(opacity=100);
}
}
-
}
+
div.w733{ position:relative;left:0px;top:0px;}
-
</script>
+
</style>
</head>
</head>
<body>
<body>
-
<style type="text/css">
+
<div class="w1003 main">
-
*{margin:0;padding:0;list-style-type:none;}
+
<div class="boxa" style="margin-top:10px;">
-
a,img{border:0;}
+
<script type="text/javascript">
-
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
+
$(document).ready(function(){
-
.banner{height:400px;overflow:hidden;}
+
var picWidth = $(".v_content_list").width(); //获取显示焦点图的宽度
-
.banner .d1{width:100%;height:392px;display:block;position:absolute;left:0px;top:0px;}
+
var len = $(".v_content_list ul li").length; //获取焦点图个数
-
.banner .d2{width:100%;height:30px;clear:both;position:absolute;z-index:100;left:0px;top:360px;}
+
var img_container = $(".v_content_list ul"); //定义变量
-
.banner .d2 ul{float:left;position:absolute;left:50%;top:0;margin:0 0 0 -96px;display:inline;}
+
var button_container = $(".highlight_tip li"); //定义变量
-
.banner .d2 li{width:17px;height:15px;overflow:hidden;cursor:pointer;background:url(/jscss/demoimg/201405/img1.png) no-repeat center;float:left;margin:0 3px;display:inline;}
+
var index = 0; //初始化index=0
-
.banner .d2 li.nuw{background:url(/jscss/demoimg/201405/img1_1.png) no-repeat center;}
+
//设置tab按钮的背景透明度为0.5
-
</style>
+
//$(".highlight_bg").css("opacity","0.5")
-
<div class="banner" id="banner" >
+
//为tab按钮添加鼠标滑入事件，以显示相应的内容
-
<a href="/" class="d1" style="http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
+
button_container.mouseenter(function() {
-
<a href="/" class="d1" style="http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
+
index = button_container.index(this);
-
<a href="/" class="d1" style="http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
+
showPics(index);
-
<a href="/" class="d1" style="background:url(http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
+
}).eq(0).trigger("mouseenter");
-
<a href="/" class="d1" style="background:url(http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
+
//计算出外围ul元素的宽度
-
<div class="d2" id="banner_id">
+
img_container.css("width",picWidth * (len));
-
<ul>
+
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
-
<li></li>
+
$(".v_content_list").hover(function() {
-
<li></li>
+
clearInterval(picTimer);
-
<li></li>
+
},function() {
-
<li></li>
+
picTimer = setInterval(function() {
-
<li></li>
+
showPics(index);
-
</ul>
+
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元素滚动到计算出的position
 +
button_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按钮添加选中的效果
 +
}
 +
})
 +
</script>
 +
<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="/jscss/demoimg/201402/up_5281c48354ddb.jpg" width="99" height="48" /></a>
 +
</li>
 +
<li class="tab2 navigation">
 +
<a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_529707516da03.jpg" width="99" height="48" /></a>
 +
</li>
 +
<li class="tab3 navigation">
 +
<a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_5289cedae6005.png" width="99" height="48" /></a>
 +
</li>
 +
<li class="tab4 navigation">
 +
<a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_52689f01d614e.jpg" width="99" height="48" /></a>
 +
</li>
 +
<li class="tab5 navigation">
 +
<a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_529703723c8d7.jpg" width="99" height="48" /></a>
 +
</li>
 +
<li class="tab6 navigation">
 +
<a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_50594c1f97227.jpg" width="99" height="48" /></a>
 +
</li>
 +
<li class="tab7 navigation">
 +
<a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/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="/jscss/demoimg/201402/up_5281c48354ddb.jpg" width="733" height="337" /></a></li>
 +
<li><a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_529707516da03.jpg" width="733" height="337" /></a></li>
 +
<li><a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_5289cedae6005.png" width="733" height="337" /></a></li>
 +
<li>
 +
<a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_52689f01d614e.jpg" width="733" height="337" /></a></li>
 +
<li>
 +
<a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_529703723c8d7.jpg" width="733" height="337" /></a></li>
 +
<li><a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_50594c1f97227.jpg" width="733" height="337" /></a></li>
 +
<li><a href="/" target="_blank">
 +
<img src="/jscss/demoimg/201402/up_514fc23184f3d.jpg" width="733" height="337" /></a></li>
 +
</ul>
 +
</div>
 +
</div>
</div>
</div>
</div>
</div>
-
<script type="text/javascript">banner()</script>
 
<div style="text-align:center;clear:both">
<div style="text-align:center;clear:both">
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 08:15, 6 September 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 百度校园jQuery焦点图

Retrieved from "http://2014.igem.org/Team:LZU-China/tempfortest"