我的网站的 Javascript 广告横幅旋转器？ [关闭]答案

【问题标题】：Javascript Ad Banner Rotator for my website? [closed]我的网站的 Javascript 广告横幅旋转器？ [关闭]
【发布时间】：2017-04-30 12:45:51
【问题描述】：

我有一个网站，我想在我创建的流媒体播放器上轮换我的附属链接。我到处搜索脚本，但找不到。我不想使用为我做这件事的服务。我想自己编写脚本。有什么建议吗？

【问题讨论】：

我建议你先写一些代码，然后在有具体问题的时候提出问题。
我完全理解你来自哪里，但这就是问题所在。我主要在 C# 中工作，但我正在用 html 和 CSS 构建一个站点，并且需要一个横幅旋转器。对不起，如果我冒犯了。

标签： javascript html ads banner

【解决方案1】：

以后，请尝试自己尝试一下，并提出更具体的问题。如果您不编写服务，我不明白您为什么不想使用服务。

但是，既然你是，这是我的建议。

Javascript：

var banners = [
  {
    "img": "tnl-banner-steve-jobs-01.png",
    "url": "http://news.stanford.edu/news/2005/june15/jobs-061505.html",
    "weight": 1
  },
  {
    "img": "tnl-banner-steve-jobs-02.png",
    "url": "http://news.stanford.edu/news/2005/june15/jobs-061505.html",
    "weight": 1
  },
  {
    "img": "tnl-banner-steve-jobs-03.png",
    "url": "http://news.stanford.edu/news/2005/june15/jobs-061505.html",
    "weight": 1
  },
  {
    "img": "tnl-banner-steve-jobs-04.png",
    "url": "http://news.stanford.edu/news/2005/june15/jobs-061505.html",
    "weight": 1
  },
  {
    "img": "tnl-banner-steve-jobs-05.png",
    "url": "http://news.stanford.edu/news/2005/june15/jobs-061505.html",
    "weight": 4
  }
];

这是要添加到 HTML 中的脚本：

<script>

// Fetch the banner setup file.
var filename = getURLParameter("type")+".js";
jQuery.getScript(filename, function(){
  var banner = randomBanner();
  // Add the banner to the page body.
  $('body').append("<a target=\"tnl_ad\" href=\""+banner["url"]+"\">" +
    "<img src=\"banners/"+banner["img"]+"\"></a>");
})
  .fail(function(jqxhr, settings, exception) {
    console.log("Error parsing " + filename + ": " + exception.message);
  }
)

function randomBanner() {
    var totalWeight = 0, cummulativeWeight = 0, i;
    // Add up the weights.
    for (i = 0; i < banners.length; i++) {
        totalWeight += banners[i]["weight"];
    }
    console.log("Total weight: " + totalWeight);
    var random = Math.floor(Math.random() * totalWeight);
    // Find which bucket the random value is in.
    for (i = 0; i < banners.length; i++) {
        cummulativeWeight += banners[i]["weight"];
        if (random < cummulativeWeight) {
            return(banners[i]);
        }
    }
}

function getURLParameter(name){
  return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]);
}
</script>

Source

【讨论】：

如果问题需要图书馆/教程推荐，那将是题外话，因为这些问题是基于意见的。请不要回答这个问题。它只会鼓励这种行为。
感谢您的帮助，如果我含糊其辞，我深表歉意。我使用了一些 javascript，但还不足以解决这个问题。非常感谢您的帮助。
很高兴我能帮上忙。我建议像这样流利地使用 Javascript——它真的非常重要，可以让你做这样的事情。
对于 2021 年或以后登陆这里的用户，请随时尝试 npm 包ad-rotator

【解决方案2】：

这是一个很棒的 js 插件，用于滑块/轮播，可以在不同的幻灯片（或您的情况下为横幅）之间旋转。

http://kenwheeler.github.io/slick/

查看自动播放功能。

希望对你有帮助。

【讨论】：

看起来服务很棒。 @Retro617，如果您不想编写自己的代码并且无论如何都在寻找外部代码，我强烈建议您使用它。
为什么投反对票？
我不确定，我也有。
不是很好，我们正在努力帮助你交配，如果它不是你想要的那件事，那很好，但没必要给我们投票
我同意。我花时间寻找好的资源来提供帮助。如果您有反馈，请以建设性和有意义的方式提供。