广告轮播效果的javascript实现

来源：互联网发布：spring 源码书籍编辑：程序博客网时间：2024/06/09 16:51

昨天开始看《Javascript基础教程(第八版)》，看到第四章有介绍如何作出循环广告的效果，上一篇博客我模仿了11对战平台主页的静态效果，其中的广告轮播的效果没有实现，今天根据我学到的知识，去实现这个效果。首先建立html结构，如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>11对战平台官网——打造最先进的对战平台</title>    <link rel="stylesheet" type="text/css" href="../css/base.css"></head><body>    <div id="main_1">        <a href="#">            <img src="../images/a_data/1.jpg" alt="ads" id="ad"/>        </a>    </div></body></html>

然后建立javascript脚本，如下：

window.onload=picSlide;var thisAd=0;function picSlide () {    thisAd++;       var picUrls=Array("../images/a_data/1.jpg","../images/a_data/2.gif","../images/a_data/3.jpg","../images/a_data/4.jpg",        "../images/a_data/5.gif","../images/a_data/6.gif","../images/a_data/7.jpg");    var htmls=Array("1.html","2.html","3.html","4.html","5.html","5.html","7.html");    if (thisAd==picUrls.length) {        thisAd=0;    };    var ad=document.getElementById("ad");    ad.parentNode.setAttribute("href",htmls[thisAd]);    ad.setAttribute("src",picUrls[thisAd]);    setTimeout(picSlide,3*1000);}

setTimeout的作用就是让每张广告每给3秒换一次。
代码很简单，但是实现的效果确实很赞！

0 0