them 1 code chay hinh

by **Admin** Fri Mar 23, 2012 10:56 am

<!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=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

body {
background-color:#990000;
}
#container{
width:900px;
height:auto;
margin:auto;
background-color:#999999;
}
#menu{
background-color:#006600;
width:900px;
height:auto;
/*float:left;*/
}
#menu li{
font-weight: bold;
color: #FFFFFF;
float: right;
list-style-type: none;
width: 15%;
}
#wrapper{
clear:both;
width:890px;
height:auto;
background-color:#9966FF;
border: 5px solid #000000;
}
#left{

/*background-color:#33FFFF;*/
float:left;
width:60%;
height:300px;
margin-left: 20px;
margin-top: 20px;
}
#right{
/*background-color:#99FF33;*/
float:right;
width:20%;
height:auto;

margin-top:20px;
text-align:center;
}
#description{
background-color:#FF66FF;
float:left;
width:100%;
height:auto;
}
#bottom{
background-color:#996666;
float:left;
width:100%;
height:auto;
}
.style1 {
font-size: 36px;
font-weight: bold;
}
.style2 {
color: #009900;
font-weight: bold;
}
#table1{
width:100%;
height:auto;
text-align:center;
}
.images{
width:80px;
height:auto;
border: 5px dotted #FF0000;
padding:5px;
}
#image_left{
border: #000066 5px double;
padding:5px;
}
</style>

<script language="javascript">
arImages= new Array("hoa cam chuong.jpg","hoa lan.jpg","hoa lai.jpg","hoa luu ly.jpg","hoa ly.jpg","hoa sen.jpg","hoa thuy vu.jpg","hoa tulip.jpg");
total_image=8;
index_image=0;

index_scroll_image=0;
total_image_small=3;
//ImageFull = document.getElementById("image_left"); khai bao bien toan cuc ko thanh cong vi document.getElementById("image_left") ko the chay phia ben ngoai function, neu muon khai bao nhu vay=> phai khai bao phia cuoi <body>. vi khi chay het <body> moi khoi tao ra "image_left" roi moi getElement duoc

function play()
{
ImageFull = document.getElementById("image_left");
var btn_play= document.getElementById("play_stop");
http://document.form1.play_stop.value = "stop";

if (btn_play.value == "play")
{
slideshow= setInterval("change_ImageFull()",1000); //goi ham change_ImageFull(), moi 1 giay se load 1 hinh moi ngau nhien
btn_play.value = "stop";
}
else
{
clearInterval(slideshow);
btn_play.value = "play";

}
}

function change_ImageFull() //nhan nut play => image_left tu load hinh cho toi khi nhan stop
{
index_image=Math.floor(Math.random()*total_image); //ham random cho gia tri tu 0->1, ham floor la ham lam tron xuong, ham round la lam tron len
//ImageFull = document.getElementById("image_left");
ImageFull.src=arImages[index_image]; //doi duong dan cua image_left = gia tri cua index_image tuong ung trong arImages
}

function next_image()
{
index_image ++;
ImageFull = document.getElementById("image_left");
if(index_image==arImages.length)
{
index_image =0;
}
ImageFull.src=arImages[index_image];
}

function previous_image()
{
index_image --;
//alert(index_image);
ImageFull = document.getElementById("image_left");
if(index_image==-1)
{
index_image =arImages.length-1;
}
ImageFull.src=arImages[index_image];
}

function home_image()
{

ImageFull = document.getElementById("image_left");
ImageFull.src=arImages[0];

}

function end_image()
{
ImageFull = document.getElementById("image_left");
ImageFull.src=arImages[arImages.length-1];
}

function scroll_up()
{
if(index_scroll_image >0)
{
index_scroll_image --;
}
else
{
index_scroll_image = total_image-1;
}
for(var i=1; i<= total_image_small; i++)
{
id_right_image = "right_image"+ i;
ImageSmall = document.getElementById(id_right_image);
ImageSmall.src = arImages[index_scroll_image+i];
}
}

function scroll_down()
{
//if(index_scroll_image < total_image - total_image_small -1)
//{
index_scroll_image = (index_scroll_image+1)%total_image;
//}
for(var i=1; i<=total_image_small; i++)
{
id_right_image = "right_image"+ i;
ImageSmall = document.getElementById(id_right_image);
ImageSmall.src = arImages[(index_scroll_image+i)%total_image];
}
}

function load_image(link_image)
{
ImageFull = document.getElementById("image_left");
ImageFull.src= link_image;
}
</script>
</head>

<body >

<div id="container">
<p><span class="style1">Photo</span> <span class="style2">Gallery</span></p>

<div id="menu">
<ul>
<li><a href="#">Hinh anh</a></li>
<li><a href="#">Chu de</a></li>
<li><a href="#">Gioi thieu</a></li>
<li><a href="#">Lien he</a></li>
</ul>
<div style="clear:both"></div>
</div>

<div id="wrapper">
<div id="left">
<img id="image_left" src="hoa thuy vu.JPG" width="100%" height="100%" />
</div>

<div id="right">

<img onclick="scroll_up()" src="top-arrow.JPG" /> <br />
<img onclick="load_image(this.src)" id="right_image1" class="images" src="hoa cam chuong.JPG" /> <br />
<img onclick="load_image(this.src)" id="right_image2" class="images" src="hoa lan.JPG" /> <br />
<img onclick="load_image(this.src)" id="right_image3" class="images" src="hoa lai.JPG" /> <br />
<img onclick="scroll_down()" src="bottom-arrow.JPG" /> <br />

</div>

<div id="description">
Bo suu tap cac loai hoa!!!
^^
<hr />
</div>

<div id="bottom">
<form id="form1" name="form1" method="post" action="">
<label>
<input onclick="home_image()" name="home" type="button" id="home" value="|<" />
</label>
<label>
<input onclick="previous_image()" name="previous" type="button" id="previous" value="<<" />
</label>
<label>
<input name="play_stop" type="button" id="play_stop" value="play" onclick="play()"/>
</label>
<label>
<input onclick="next_image()" name="next" type="button" id="next" value=">>" />
</label>
<label>
<input onclick="end_image()" name="end" type="button" id="end" value=">|" />
</label>
</form>
</div>
<div style="clear:both"></div>
</div>

</div>

</body>

</html>