search

Home >Web Front-end >JS Tutorial >Multiple image ads alternately display effect code implemented in JavaScript_javascript skills

Multiple image ads alternately display effect code implemented in JavaScript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:40:491503browse

The example in this article describes the alternate display effect code of multiple image ads implemented in JavaScript. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of the effect of using JavaScript to display multiple Banner image ads alternately. If your website is very good and the advertising space is full, you can consider letting multiple image ads display alternately in turn, and the links will also change accordingly. This is Didn’t it save you valuable advertising space? The idea is good, but I don’t know if the advertising effect will be as good. This requires experimentation.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-npic-cha-adv-style-codes/

The specific code is as follows: 

<html>
<head>
<title>图片广告交替显示</title>
<script language="JavaScript" type="text/JavaScript">
<!--
var urlArray = new Array(3); 
var banArray = new Array(3); 
var counter = 1;
var url = "http://www.jb51.net/"; //initial URL
urlArray[0] = "http://www.jb51.net/";
urlArray[1] = "http://www.baidu.com/";
urlArray[2] = "http://www.163.com/";
if(document.images) 
{
 for(i = 0; i < 3; i++)
 {
  banArray[i] = new Image(200, 60);
  banArray[i].src = "images/wall_s" + (i+1) + ".jpg";
 }
}
function changeBanner() 
{
 if(counter > 2)
  counter = 0;
 document.banner.src = banArray[counter].src; //sets a new banner
 url = urlArray[counter]; 
 counter++; 
}
var timer = window.setInterval("changeBanner()", 3000);
//-->
</script>
</head>
<body>
<a href="#" onClick="window.open(url,'BannerWin');">
<img src="images/wall_s1.jpg" width=200 height=60 border=0 
name="banner"></a>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery right tab focus image carousel special effects code sharing_jqueryNext article：jQuery right tab focus image carousel special effects code sharing_jquery

Related articles

See more