Home > Developer > Web Develop
The HTML structure is as follows
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Shopping list</title></Head><Scripttype= "Text/javascript"src= "Scripts/showpic.js"></Script><Linkrel= "stylesheet"href= "Scripts/style.css"Media= "Screen"><Body><H1>Snapshots</H1><ulID= "Imagegallery"> <Li><ahref= "Images/fireworks.jpg"title= "A Fireworks display">Fireworks</a></Li> <Li><ahref= "Images/coffee.jpg"title= "A Cup of black coffee">Coffee</a></Li> <Li><ahref= "Images/rose.jpg"title= "A red, Red Rose">Rose</a></Li> <Li><ahref= "Images/bigben.jpg"title= "The famous Clock">Big Ben</a></Li></ul><imgID= "Placeholder"src= "Images/placeholder.jpg"alt= "My Image gallery" /><PID= "description">Choose an image.</P></Body></HTML>
JS code is as follows
functionShowpic (Whichpic)/*Whichpic represents an element node, pointing to the <a> element of a picture*/ { if(!document.getelementbyid ("placeholder"))return false;/*Check ID is placeholder element*/ varSource = Whichpic.getattribute ("href");/*gets the path of the picture file on the a element to the variable source*/ varplaceholder = document.getElementById ("placeholder");/*Get placeholder Graph deposit Variable Placeholder*/ if(Placeholder.nodename! = "IMG")return false;/*Check the picture elements of the variable placeholder*/Placeholder.setattribute ("src", source);/*image path refresh for placeholders*/ if(document.getElementById ("description"))/ * Check ID is description element*/ { varText = Whichpic.getattribute ("title")? Whichpic.getattribute ("title"): "";/*Assign the title element if there is a title on the A element, and if not, assign an empty string*/ varDescription = document.getElementById ("description"); if(Description.firstChild.nodeType = = 3) {Description.firstChild.nodeValue= text;/*Set the value of the NodeValue property of the first child node of the description object to the value of the variable text. */ } } return true; }functionPreparegallery () {if(!document.getelementsbytagname)return false;/*Check the getElementsByTagName method*/ if(!document.getelementbyid)return false;/*Check the getElementById method*/ if(!document.getelementbyid ("Imagegallery"))return false;/*checks if the Imagegaller element exists*/ varGallery = document.getElementById ("Imagegallery");/*get imagegallery ID assignment to Gallery*/ varLinks = gallery.getelementsbytagname ("a");/*Get Gallery A LINK element assignment to links*/ /*For loop traversal links Array*/ for(vari=0; i<links.length; i++) {Links[i].onclick=function()/*execute Showpic () function per click*/ { returnShowpic ( This)?false:true;/*Judging the default behavior*/ } }} /*The shared Onlond event, encapsulated as a function, @func the one that needs to be executed when the page loads. If Window.onload does not bind any functions at the time of page loading, add the function to it, and if the handler is already bound to the function, append the new function to the end of the existing instruction .*/functionAddloadevent (func) {varOldonload = window.onload;/*The Window.onload event handler function is stored in the variable oldonload*/ if(typeofWindow.onload! = ' function ') {window.onload=func; }Else{window.onload=function() {oldonload (); Func (); }}}addloadevent (preparegallery);
First, the showpic function .
Define the source variable to get the path to the a element, and then define the placeholder element to get a placeholder picture with ID placeholder.
if (!document.getelementbyid ("placeholder")) return false; This code is used to check if the ID of the placeholder element exists;
if (placeholder.nodename! = "IMG") return false; Check whether the picture element of the variable placeholder exists;
placeholder.setattribute ("src", source); The placeholder picture path is refreshed;
Next If (document.getElementById ("description")) determines whether the ID is description element exists, if present, modifies the picture text;
var text = Whichpic.getattribute ("title")? Whichpic.getattribute ("title"): ""; Define the variable text to determine the whichpic on the A element has a title on the assigned title value, if not, then assign an empty string;
var description = document.getElementById ("description"); Gets the ID description and assigns the variable description;
if (Description.firstChild.nodeType = = 3) Determines whether the first child element of the description element is a text node. (NodeType is the type used to obtain the current node object.) Text text=3)
description.firstChild.nodeValue = text; Set the value of the NodeValue property of the first child node of the description object to the value of the variable text.
And then the Preparegallery function.
if (!document.getelementsbytagname) return false;
if (!document.getelementbyid) return false;
if (!document.getelementbyid ("Imagegallery")) return false;
The first two paragraphs examine the getElementsByTagName and getElementById methods Separately, and the third code spreads the ID is imagegallery Whether the element exists.
var gallery = document.getElementById ("Imagegallery"); Get Imagegallery ID assignment to Gallery
var links = gallery.getelementsbytagname ("a"); Get gallery A LINK element assignment to links
For loop traversal
return Showpic (this)? False:true; Determines the default behavior of the browser, which in Showpic (this) refers to the currently specified element, which is links[i].
JS Learning Note (v) Photo Gallery Example
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
