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鼠标悬浮图片放大特效</title>
+
<title>jquery全屏banner自动轮播切换</title>
-
<script src="/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script>
+
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"/></script>
<script type="text/javascript">
<script type="text/javascript">
-
$(function(){
+
function banner(){
-
var imgWid = 0 ;
+
var bn_id = 0;
-
var imgHei = 0 ; //变量初始化
+
var bn_id2= 1;
-
var big = 5.2;//放大倍数
+
var speed33=5000;
-
$(".banimg li").hover(function(){
+
var qhjg = 1;
-
$(this).find("img").stop(true,true);
+
var MyMar33;
-
var imgWid2 = 0;var imgHei2 = 0;//局部变量
+
$("#banner .d1").hide();
-
imgWid = $(this).find("img").width();
+
$("#banner .d1").eq(0).fadeIn("slow");
-
imgHei = $(this).find("img").height();
+
if($("#banner .d1").length>1)
-
imgWid2 = imgWid * big;
+
{
-
imgHei2 = imgHei * big;
+
$("#banner_id li").eq(0).addClass("nuw");
-
$(this).find("img").css({"z-index":2});
+
function Marquee33(){
-
$(this).find("img").animate({"width":imgWid2,"height":imgHei2,"margin-left":-imgWid2/2,"margin-top":-imgHei2/2});
+
bn_id2 = bn_id+1;
-
},function(){$(this).find("img").stop().animate({"width":imgWid,"height":imgHei,"margin-left":-imgWid/2,"margin-top":-imgHei/2,"z-index":1});});
+
if(bn_id2>$("#banner .d1").length-1)
-
})
+
{
 +
bn_id2 = 0;
 +
}
 +
$("#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
 +
{
 +
$("#banner_id").hide();
 +
}
 +
}
</script>
</script>
-
<style type="text/css">
 
-
*{margin: 0; padding: 0; list-style: none;}
 
-
.banimg{width: 600px;height: 200px; margin: 20px auto;}
 
-
.banimg li{ width: 200px; height: 200px; float: left; position: relative;}
 
-
.banimg li img{ width: 200px; height: 200px; position: absolute; left: 50%;top: 50%;margin: -100px 0 0 -100px;z-index: 1;}
 
-
</style>
 
</head>
</head>
<body>
<body>
-
<ul class="banimg">
+
<style type="text/css">
-
  <li><a href="#"><img src="/jscss/demoimg/wall_s7.jpg" /></a></li>
+
*{margin:0;padding:0;list-style-type:none;}
-
  <li><a href="#"><img src="/jscss/demoimg/wall_s8.jpg" /></a></li>
+
a,img{border:0;}
-
</ul>
+
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
 +
.banner{height:400px;overflow:hidden;}
 +
.banner .d1{width:100%;height:392px;display:block;position:absolute;left:0px;top:0px;}
 +
.banner .d2{width:100%;height:30px;clear:both;position:absolute;z-index:100;left:0px;top:360px;}
 +
.banner .d2 ul{float:left;position:absolute;left:50%;top:0;margin:0 0 0 -96px;display:inline;}
 +
.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;}
 +
.banner .d2 li.nuw{background:url(/jscss/demoimg/201405/img1_1.png) no-repeat center;}
 +
</style>
 +
<div class="banner" id="banner" >
 +
<a href="/" class="d1" style="http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
 +
<a href="/" class="d1" style="http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
 +
<a href="/" class="d1" style="http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
 +
<a href="/" class="d1" style="background:url(http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
 +
<a href="/" class="d1" style="background:url(http://i.minus.com/iNzYIwiDIxjKw.jpg) center no-repeat;"></a>
 +
<div class="d2" id="banner_id">
 +
<ul>
 +
<li></li>
 +
<li></li>
 +
<li></li>
 +
<li></li>
 +
<li></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<script type="text/javascript">banner()</script>
 +
<div style="text-align:center;clear:both">
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 08:12, 6 September 2014

jquery全屏banner自动轮播切换

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