javascript制作图片切换

javascript制作美术馆 

    本文使用javascrip，css，html制作一个图片切换案例。html作为网页的结构搭建，css作为样式表现，javascript控制网页的行为。案例制作分为三个步骤。

1。css样式的构建layout.css。

/**/ /* CSS Document */
body
{...} {
  font-family : "Helvetica" ,"Arial" ,sans-serif ;
  color : #333 ;
  background-color : #ccc ;
  margin : 1em 10% ;
}
h1
{...} {
  color : #333 ;
  background-color : transparent ;
}
a
{...} {
   color : #c60 ;
   background-color : transparent ;
   font-family : bold ;
   text-decoration : none ;
}
ul {...} {
padding : 0 ;
}
li
{...} {
float : left ;
padding : 1em ;
list-style : none;
}
#imagegallery 
{...} {
     list-style : none ;
}

#imagegallery li
{...} {
      display : inline ;
}


#imagegallery li a img
{...} {
      border : 0 ;
}

2.编写html文件gallery.html，搭建网页的结构

< html >
< head >
< title ></ title >
< script  type ="text/javascript"  src ="showpic.js" ></ script >
< link  rel ="stylesheet"  href ="layout.css"  type ="text/css"  media ="screen" />
</ head >
< body >
< h1 > Snapshots </ h1 >
< ul  id ="imagegallery" >
< li >< a  href ="images/01.jpg"  title ="a girl dispaly1"   >< img  src ="images/01.jpg"  alt ="girl 1"  width ="80"  height ="60" /></ a ></ li >
< li >< a  href ="images/02.jpg"  title ="a girl dispaly2"   >< img  src ="images/02.jpg"  alt ="girl 2"  width ="80"  height ="60" /></ a ></ li >
< li >< a  href ="images/03.jpg"  title ="a girl dispaly3"   >< img  src ="images/03.jpg"  alt ="girl 3"  width ="80"  height ="60" /></ a ></ li >
< li >< a  href ="images/04.jpg"  title ="a girl dispaly4"   >< img  src ="images/04.jpg"  alt ="girl 4"  width ="80"  height ="60" /></ a ></ li >
</ ul >
</ body >
</ html >

3。编写javascript文件showpic.js控制网页的行为

//  JavaScript Document
addLoadEvent(preparePlace);
addLoadEvent(prepareGallery);
function  showPic(whichpic)
... {
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var title=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.childNodes[0].nodeValue=title;
}

function  prepareGallery()
... {
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById("imagegallery")) return false;
    var gallery=document.getElementById("imagegallery");
    var links=gallery.getElementsByTagName("a");
    for(var i=0;i<links.length;i++)
    ...{
        links[i].onclick=function()
        ...{
            showPic(this);
            return false;
        }
    }
}

function  addLoadEvent(func)
... {
    var oldonload=window.onload;
    if(typeof window.onload!='function')
    ...{
        window.onload=func;
    }
    else
    ...{
        window.onload=function()
        ...{
            oldonload();
            func();
        }
    }
}

function  inserAfter(newElement,targetElement)
... {
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement)
    ...{
        parent.appendChild(newElement);
    }
    else...{
        parent.insertBefore(newElement,targetElement.nextSibling)
    }
}


function  preparePlace()
... {
    var place=document.createElement("img");
    place.setAttribute("id","placeholder");
    place.setAttribute("src","images/place.JPG");
    place.setAttribute("width","400")
    place.setAttribute("height","300")
    var description=document.createElement("p");
    description.setAttribute("id","description");
    var desctext=document.createTextNode("select an pic");
    description.appendChild(desctext);
    var gallery=document.getElementById("imagegallery");
    inserAfter(place,gallery);
    inserAfter(description,place);
}