이 기사의 예에서는 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 프로그래밍 설계에 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
