Template:KIT-Kyoto.Header

From 2012.igem.org

(Difference between revisions)
m
m
Line 3: Line 3:
<br>
<br>
<br>
<br>
 +
<link rel="stylesheet" type="text/css" href="http://www.bluebamboo.co.jp/rule/template/jslist/file_016/css/change.css" media="all" />
 +
<script type="text/javascript" src="http://www.bluebamboo.co.jp/rule/template/jslist/file_016/js/jquery-1.2.6.min.js"></script>
 +
<script type="text/javascript">
 +
<!--
 +
$(function(){
 +
var imgNo = 4; //画像枚数
 +
var currentNo = 0;
 +
var targetNo = 0;
 +
var timerId;
 +
var fspeeds=1500; //切り替え時間
 +
 +
var links = [ //画像にリンクを指定（不用な場合は、spaceでOK）
 +
"http://www.yahoo.co.jp/",
 +
"http://www.yahoo.co.jp/",
 +
"http://www.yahoo.co.jp/",
 +
"http://www.yahoo.co.jp/"
 +
];
 +
var alts = [ //画像の説明文（不用な場合は、spaceでOK）
 +
"画像の説明その1",
 +
"画像の説明その2",
 +
"画像の説明その3",
 +
"画像の説明その4"
 +
];
 +
 +
//initialize
 +
(function(){
 +
for(var i=1; i<=imgNo; i++){
 +
//create element
 +
$('<div id="rImg'+i+'">').appendTo($('#mainImg'));
 +
 +
//load image
 +
var img = $('<img>').attr('src','images/main_'+i+'.jpg');
 +
img.attr('alt',alts[i-1]);
 +
img.load(imgLoaded.call(img, i));
 +
 +
}
 +
})();
 +
 +
function imgLoaded(no){
 +
//add image
 +
var obj = $('#rImg'+no);
 +
obj.children('img').remove();
 +
obj.append($(this));
 +
$('<a href="'+links[no-1]+'" />').append(this).appendTo(obj);
 +
 +
//start animation
 +
if(no==1) loop();
 +
}
 +
 +
//rotation image
 +
function loop(){
 +
//fadeout current image
 +
if(currentNo!=0) $('#rImg'+currentNo).fadeOut(fspeeds);
 +
 +
if(targetNo==0) currentNo = ++currentNo>imgNo?1:currentNo;
 +
else currentNo = targetNo;
 +
targetNo = 0;
 +
 +
//fadein next image
 +
$('#rImg'+currentNo).fadeIn(fspeeds);
 +
timerId = setTimeout(loop, 7000)
 +
}
 +
});
 +
--!>
 +
</script>
 +
 +
<body>
 +
<div id="mainImg">
 +
　　<noscript><img src="images/main_1.jpg" alt="" width="650" height="400" /></noscript>
 +
</div>
 +
</body> 
 +
var imgNo = 4; //画像枚数
 +
var fspeeds=1500; //切り替え時間
 +
 +
 +
var alts = [ //画像の説明文（不用な場合は、spaceでOK）
 +
"画像の説明その1",
 +
"画像の説明その2",
 +
"画像の説明その3",
 +
"画像の説明その4"
 +
];
 +
 +
 +
<a href="https://2012.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/3/3f/Igem.png"class="iGEM" align="left" width="170" height="120"></a>
<a href="https://2012.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/3/3f/Igem.png"class="iGEM" align="left" width="170" height="120"></a>
<img src="" class="KITlogo" align="right" width="170" height="120" title="KITlogo">
<img src="" class="KITlogo" align="right" width="170" height="120" title="KITlogo">

Revision as of 02:27, 25 August 2012



　　
var imgNo = 4; //画像枚数 var fspeeds=1500; //切り替え時間 var alts = [ //画像の説明文（不用な場合は、spaceでOK） "画像の説明その1", "画像の説明その2", "画像の説明その3", "画像の説明その4" ];





Retrieved from "http://2012.igem.org/Template:KIT-Kyoto.Header"