> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트를 사용하여 원형 광고 배너 효과를 얻는 방법에 대한 튜토리얼

자바스크립트를 사용하여 원형 광고 배너 효과를 얻는 방법에 대한 튜토리얼

小云云
풀어 주다: 2017-12-13 09:38:25
원래의
1860명이 탐색했습니다.

이 글은 주로 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);//设置时间,本每隔多长时间改变广告条中的GIF

}

로그인 후 복사

루프 광고 표시줄에 링크 추가: 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);//设置时间,本每隔多长时间改变广告条中的GIF

}

로그인 후 복사


관련 추천:

Html+CSS 플로팅 광고 스트립 구현 decomposition_HTML/Xhtml_웹 페이지 제작

js 웹사이트에서 닫을 수 있는 최상위 플로팅 광고 스트립 코드 구현_javascript 기술

방법 PHP

에서 광고 배너를 전체 화면으로 이동하세요

위 내용은 자바스크립트를 사용하여 원형 광고 배너 효과를 얻는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿