Home > Developer > JavaScript
One of the most common and significant uses of JavaScript is to add animations to a webpage to make it more visually attractive. Among them, there is a tumbler effect and an advertisement bar application. Record two practical examples:
(1) Add a link to the circular ad bar
In this way, visitors can click the link to access the ad-related site.
HTML
[Html]
<! -- Add a link to a circular advertisement -->
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Rotating Banner with Links </title>
<Script type = "text/javascript" src = "script01.js"> </script>
</Head>
<Body bgcolor = "# FFFFFF">
<Div align = "center">
<A href = "linkPage.html"> </a>
</Div>
</Body>
</Html>
The following js script (script01.js) demonstrates how to convert a circular ad record to a truly clickable ad record.
[Javascript]
Window. onload = initBannerLink;
Var thisAd = 0;
Function initBannerLink (){
If (document. getElementById ("adBanner"). parentNode. tagName = ""){
Document. getElementById ("adBanner"). parentNode. onclick = newLocation;
}
// Check whether the adBanner object is enclosed in the link tag. If so, the newLocation () function is called when you click the link.
Rotate ();
}
Function newLocation (){
Var adURL = new Array ("negrino.com", "sun.com", "microsoft.com ");
Document. location. href = "http: // www. "+ adURL [thisAd]; // set the current document window as a text string <a href =" http: // www "> http: // www. add the value of adURL </a> return false; // tell the browser not to load this href; otherwise, the URL will be loaded twice.
}
Function rotate (){
Var adImages = new Array ("images/banner1.gif", "images/banner2.gif", "images/banner3.gif ");
ThisAd ++;
If (thisAd = adImages. length ){
ThisAd = 0;
}
Document. getElementById ("adBanner"). src = adImages [thisAd];
SetTimeout (rotate, 3*1000 );
}
Note: The number of members in the adURL array must be the same as that in the adImages array. This script can work normally.
Create an imagesfolder and save it to banner1.gif, banner2.gif, and banner3.gif.
(2) randomly starting to show images cyclically
If many images need to be displayed, you may not want to display them from the same image every time you load the page. The following HTML and js combinations can be used to achieve random start.
[Html]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Rotating Random Banner </title>
<Script type = "text/javascript" src = "script02.js"> </script>
</Head>
<Body bgcolor = "# FFFFFF">
<Div align = "center">
</Div>
</Body>
</Html>
The following js script (script02.js) can display images from a random Image
[Javascript]
Window. onload = choosePic;
Var adImages = new Array ("images/reading1.gif", "images/reading2.gif", "images/reading3.gif ");
Var thisAd = 0;
Function choosePic (){
ThisAd = Math. floor (Math. random () * adImages. length ));
Document. getElementById ("adBanner"). src = adImages [thisAd];
Rotate ();
}
Function rotate (){
ThisAd ++;
If (thisAd = adImages. length ){
ThisAd = 0;
}
Document. getElementById ("adBanner"). src = adImages [thisAd];
SetTimeout (rotate, 3*1000 );
}
Create an images folder and add three gif images, including reading1. (Source JavaScript basic tutorial)
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
