suchen

Heim >Web-Frontend >js-Tutorial >Mehrere Bildanzeigen zeigen abwechselnd Effektcode an, der in JavaScript_Javascript-Kenntnissen implementiert ist

Mehrere Bildanzeigen zeigen abwechselnd Effektcode an, der in JavaScript_Javascript-Kenntnissen implementiert ist

WBOY
WBOYOriginal
2016-05-16 15:40:491505Durchsuche

Das Beispiel in diesem Artikel beschreibt den alternativen Anzeigeeffektcode mehrerer in JavaScript implementierter Bildanzeigen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration der Wirkung der Verwendung von JavaScript zur abwechselnden Anzeige mehrerer Banner-Bildanzeigen. Wenn Ihre Website sehr gut ist und die Werbefläche voll ist, können Sie erwägen, mehrere Bildanzeigen abwechselnd anzuzeigen, und die Links werden angezeigt Ändern Sie auch entsprechend. Hat es Ihnen nicht wertvolle Werbefläche gespart? Die Idee ist gut, aber ich weiß nicht, ob der Werbeeffekt so gut sein wird. Das erfordert Experimente.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt: 

<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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery, rechte Registerkarte, Fokusbild, Karussell, Spezialeffektcode, Sharing_jqueryNächster Artikel：jQuery, rechte Registerkarte, Fokusbild, Karussell, Spezialeffektcode, Sharing_jquery

In Verbindung stehende Artikel

Mehr sehen