Diễn đàn cntt ĐH-TÔN ĐỨC THẮNG.Thân mời các anh em tham gia để diễn đàn phong phú hơn
Chào mừng bạn ghé thăm diễn đàn, hãy tham gia đăng kí thành viên cùng chúng tôi để có thêm động lực post bài

them 1 code chay hinh

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

them 1 code chay hinh

Bài gửi by Admin on 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">
<!--<table id="table1">
<tr>
<td><img class="arrow" src="top-arrow.jpg" width="56" height="41" /></td>
</tr>
<tr>
<td><img id="image_right1" class="images" src="hoa cam chuong.JPG" width="245" height="245" /></td>
</tr>
<tr>
<td><img id="image_right2" class="images" src="hoa lai.JPG" width="246" height="246" /></td>
</tr>
<tr>
<td><img id="image_right3" class="images" src="hoa lan.JPG" width="246" height="246" /></td>
</tr>
<tr>
<td><img class="arrow" src="bottom-arrow.jpg" width="56" height="41" /></td>
</tr>
</table>-->
<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="|&lt;" />
</label>
<label>
<input onclick="previous_image()" name="previous" type="button" id="previous" value="&lt;&lt;" />
</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="&gt;&gt;" />
</label>
<label>
<input onclick="end_image()" name="end" type="button" id="end" value="&gt;|" />
</label>
</form>
</div>
<div style="clear:both"></div>
</div>



</div>

</body>
<!--<script language="javascript">
ImageFull = document.getElementById("image_left");
</script>-->
</html>


Admin
Thiếu Tá
Thiếu Tá

Tổng số bài gửi : 107
Age : 26

Xem lý lịch thành viên http://itam.forumvi.com

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết