js实现轮播图

之前群里有个朋友问我如何让他的广告位的图片实现轮播,下面我抛砖引玉下。直接贴代码啦
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
<a href="" id="ad_url" target="_blank"><img src="" alt="" id="ad_img"></a>
<script type="text/javascript">
    var imgs = new Array();
    var imgs_url = new Array();
    //放图片地址
    imgs[0] = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1799788101,1456112001&fm=23&gp=0.jpg";
    imgs[1] = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4077451546,3326114836&fm=23&gp=0.jpg";
    imgs[2] = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3105041861,1691488416&fm=23&gp=0.jpg";
    //放图片路径
    imgs_url[0] = "https://www.baidu.com";
    imgs_url[1] = "http://liuyanzhao.com";
    imgs_url[2] = "https://segmentfault.com";
    var num = 0;
    setInterval(turnpic, 1000); //每隔1秒转换图片
    function turnpic() {
        ad_img = document.getElementById("ad_img");
        ad_url = document.getElementById("ad_url");
        if (num == imgs.length - 1)
            num = 0;
        else
            num += 1;
        ad_img.src = imgs[num];
        ad_url.href = imgs_url[num];

    }
</script>
</html>
图片路径和超链接路径以及显示图片张数可以自行修改和添加。  

发表评论

目前评论:1