이 글은 주로 JavaScript를 이용한 순환 광고 배너의 효과를 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.
html 코드:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html>
<html>
<head>
<title>Rotating Banner</title>
<script src= "script07.js" ></script>
<link rel= "stylesheet" href= "script01.css" rel= "external nofollow" >
</head>
<body>
<p class = "centered" >
<img src= "images/reading1.gif" id= "adBanner" alt= "Ad Banner" >
</p>
</body>
</html>
|
로그인 후 복사
css 코드:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | body {
background-color: white;
color: black;
font-size: 20px;
font-family: "Lucida Grande" , Verdana,Arial, Helvetica, sans-serif;
}
h1, th {
font-family: Georgia, "Times New Roman" ,Times, serif;
}
h1 {
font-size: 28px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 2px #666 solid;
text-align: center;
width: 20%;
}
#free, .pickedBG {
background-color: #f66;
}
.winningBG {
background-image:url(images/redFlash.gif);
}
|
로그인 후 복사
js 코드:
1 2 3 4 5 6 7 8 9 10 11 | window.onload = rotate;
var thisAd = 0;
function rotate() {
var adImages = new Array( "images/ reading1.gif" , "images/reading2. gif" , "images/reading3.gif" );
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById( "adBanner" ).src = adImages[thisAd];
setTimeout(rotate, 3 * 1000);
}
|
로그인 후 복사
루프 광고 표시줄에 링크 추가: js 코드 수정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | window.onload = initBannerLink;
var thisAd = 0;
function initBannerLink() {
if (document.getElementById( "adBanner" ).parentNode.tagName == "A" ) {
document.getElementById( "adBanner" ).parentNode.onclick = newLocation;
}
rotate();
}
function newLocation() {
var adURL = new Array( "negrino.com" , "sun.com" , "microsoft.com" );
document.location.href = "http://www." + adURL[thisAd];
return false;
}
function rotate() {
var adImages = new Array( "images/ reading1.gif" , "images/reading2. gif" , "images/reading3.gif" );
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById( "adBanner" ).src = adImages[thisAd];
setTimeout(rotate, 3 * 1000);
}
|
로그인 후 복사
관련 추천:
Html+CSS 플로팅 광고 스트립 구현 decomposition_HTML/Xhtml_웹 페이지 제작
js 웹사이트에서 닫을 수 있는 최상위 플로팅 광고 스트립 코드 구현_javascript 기술
방법 PHP
에서 광고 배너를 전체 화면으로 이동하세요
위 내용은 자바스크립트를 사용하여 원형 광고 배너 효과를 얻는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!