广告轮播效果的javascript实现

最新推荐文章于 2024-09-02 15:27:31 发布

天方夜谭谭谭

最新推荐文章于 2024-09-02 15:27:31 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： javascript html 广告

本文链接：https://blog.csdn.net/tyhzsd/article/details/47293641

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

昨天开始看《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);
}