>웹 프론트엔드 >JS 튜토리얼 >여러 이미지 광고는 JavaScript_javascript 기술로 구현된 효과 코드를 교대로 표시합니다.

여러 이미지 광고는 JavaScript_javascript 기술로 구현된 효과 코드를 교대로 표시합니다.

WBOY
WBOY원래의
2016-05-16 15:40:491503검색

이 기사의 예에서는 JavaScript로 구현된 여러 이미지 광고의 대체 표시 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

다음은 JavaScript를 사용하여 여러 배너 이미지 광고를 번갈아 표시하는 효과를 보여줍니다. 웹사이트가 매우 훌륭하고 광고 공간이 꽉 찬 경우 여러 이미지 광고를 번갈아 표시하도록 허용할 수 있으며 링크는 그에 따라 변경해도 됩니다. 귀중한 광고 공간이 절약되지 않았나요? 아이디어는 좋은데 광고효과가 그만큼 좋을지는 모르겠습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체적인 코드는 다음과 같습니다.

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

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.