Slideshow Carousel effect with flash
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> image rotation effect of flash--www.miaov.com wonderful class </title>
<link rel= "stylesheet" type= "Text/css" href= "Miao_style.css" >
<script src= ". /move.js "></script>
<script>
function Getbyclass (oparent, Sclass)
{
var aele=document.getelementsbytagname (' * ');
var i=0;
var aresult=[];
for (i=0;i<aele.length;i++)
{
if (Aele[i].classname==sclass)
{
Aresult.push (Aele[i]);
}
}
return aresult;
}
Window.onload=function ()
{
var Odiv=document.getelementbyid (' Playeimages ');
var obtnprev=getbyclass (odiv, ' prev ') [0];
var obtnnext=getbyclass (Odiv, ' next ') [0];
var omarkleft=getbyclass (odiv, ' mark_left ') [0];
var omarkright=getbyclass (odiv, ' mark_right ') [0];
var osmallul=getbyclass (odiv, ' small_pic ') [0].getelementsbytagname (' ul ') [0];
var asmallli=osmallul.getelementsbytagname (' Li ');
var obigul=getbyclass (odiv, ' big_pic ') [0];
var abigli=obigul.getelementsbytagname (' Li ');
var inow=0;
var iminzindex=2;
var i=0;
osmallul.style.width=asmallli.length*asmallli[0].offsetwidth+ ' px ';
The left and right buttons above
Obtnprev.onmouseover=omarkleft.onmouseover=function ()
{
Startmove (Obtnprev, ' opacity ', 100);
}
Obtnprev.onmouseout=omarkleft.onmouseout=function ()
{
Startmove (Obtnprev, ' opacity ', 0);
}
Obtnnext.onmouseover=omarkright.onmouseover=function ()
{
Startmove (Obtnnext, ' opacity ', 100);
}
Obtnnext.onmouseout=omarkright.onmouseout=function ()
{
Startmove (Obtnnext, ' opacity ', 0);
}
Small image Click, large image display
for (i=0;i<asmallli.length;i++)
{
Asmallli[i].index=i;
Asmallli[i].onmouseover=function ()
{
Startmove (this, ' opacity ', 100);
}
Asmallli[i].onmouseout=function ()
{
if (This.index!=inow)
{
Startmove (this, ' opacity ', 60);
}
}
Asmallli[i].onclick=function ()
{
if (This.index==inow) return;
Inow=this.index;
tab ();
}
Function tab ()
{
for (i=0;i<asmallli.length;i++)
{
Startmove (Asmallli[i], ' opacity ', 60);
}
Startmove (Asmallli[inow], ' opacity ', 100);
abigli[inow].style.zindex=iminzindex++;
abigli[inow].style.height=0;
Startmove (Abigli[inow], ' height ', obigul.offsetheight);
if (inow==0)
{
Startmove (Osmallul, ' left ', 0);
}
else if (inow==asmallli.length-1)
{
Startmove (Osmallul, ' left ',-(iNow-2) *asmallli[0].offsetwidth);
}
Else
{
Startmove (Osmallul, ' left ',-(iNow-1) *asmallli[0].offsetwidth);
}
}
Obtnprev.onclick=function ()
{
inow--;
if (inow==-1)
{
Inow=asmallli.length-1;
}
tab ();
}
Obtnnext.onclick=function ()
{
inow++;
if (inow==asmallli.length)
{
inow=0;
}
tab ();
}
}
}
</script>
<body>
<div id= "Playimages" class= "Play" >
<ul class= "Big_pic" >
<div class= "prev" ></div>
<div class= "Next" ></div>
<div class= "text" > Loading picture description ......</div>
<div class= "Length" > Calculate number of images ......</div>
<a class= "Mark_left" href= "javascript:;" ></a>
<a class= "Mark_right" href= "javascript:;" ></a>
<div class= "BG" ></div>
<li style= "Z-INDEX:1;" ></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class= "Small_pic" >
<ul style= "width:390px;" >
<li style= "FILTER:100; opacity:1; " ></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
Note The main points:
1css page layout, put Li stacked, position:absolute;left are 0.
2. The height of the image is changed because the height of the Li is from the 0-390,li inside the nesting img,img is fixed, so the height is changed.
Slideshow Carousel effect with flash