每次页面加载时提取随机图像

2023-12-30

在每个页面加载时我都会更改图像。我发现这个插件做得很好。

(function($){

    $.randomImage = {
        defaults: {

            //you can change these defaults to your own preferences.
            path: '/templates/default/images/', //change this to the path of your images
            myImages: ['fab_ad1.jpg', 'fab_ad2.jpg', 'fab_ad3.jpg'] //put image names in this bracket. ex: 'harold.jpg', 'maude.jpg', 'etc'

        }           
    }

    $.fn.extend({
            randomImage:function(config) {

                var config = $.extend({}, $.randomImage.defaults, config); 

                 return this.each(function() {

                        var imageNames = config.myImages;

                        //get size of array, randomize a number from this
                        // use this number as the array index

                        var imageNamesSize = imageNames.length;

                        var lotteryNumber = Math.floor(Math.random()*imageNamesSize);

                        var winnerImage = imageNames[lotteryNumber];

                        var fullPath = config.path + winnerImage;


                        //put this image into DOM at class of randomImage
                        // alt tag will be image filename.
                        $(this).attr( {
                                        src: fullPath,
                                        alt: winnerImage
                                    });


                }); 
            }

    });



})(jQuery);

HTML:

<img class="shuffle" src="" alt="" onclick="chooseLink()">

调用这个函数:

$('.shuffle').randomImage();

使用此功能,我可以在我的页面上展示广告。我为每个广告图片都有单独的链接。单击图像时我正在调用javascript函数,我需要识别图像名称,并且相对于此,我重定向到单独的链接。就我而言,我不知道如何识别被单击的图像名称。请建议我如何识别被单击的图像名称。
希望我的问题很清楚。 提前致谢 !!!


Change

<img class="shuffle" src="" alt="" onclick="chooseLink()">

to

<img class="shuffle" src="">

并将其添加到您的脚本中:

$('.shuffle').click(function(){
    var imageId = this.src.split('/').pop(); // this is the name of your image file
                                             // It identifies the image
    // use the image 
    chooseLink(imageId);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

每次页面加载时提取随机图像 的相关文章

  • 试图隐藏选择列表中的选项..不适用于 chrome 和 ie

    我有一个选择列表 其中有很多选项 根据某些输入 我想从选择列表中隐藏一些选项 为了隐藏选择列表中的选项 我编写了jquery 例如 selectlist1 option each function this hide 但这段代码似乎只适用于
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • 全高全宽 CSS 布局

    我正在寻找一种方法来创建具有 5 个区域的纯 CSS 无 JavaScript 布局 如下所示 H A B C F
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • 播放没有音频标签的音频

    是否可以在没有音频标签的情况下仅使用 javascript 播放音频 我通过 tinyMce 编辑器注入脚本 因为我无权访问网站的后端 并且它不支持客户端的音频标签 她只想要当您将鼠标悬停在图像上时发出简单的声音 我已经完成了所有设置 但是
  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
  • Angular JS - 使服务可以从控制器和视图全局访问

    假设我们有以下服务 myApp factory FooService function 然后 从控制器中 我会说 myApp controller FooCtrl scope FooService function scope FooSer
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程
  • 当php脚本通过ajax运行时显示进度条

    我有一个通过 ajax 向服务器提交值的表单
  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行
  • Graphql 将多个查询合并(组合)为一个?

    我正在尝试使用 JavaScript 将多个 GraphQL 查询合并为一个查询 我正在寻找这样的东西 let query3 mergeQueries query1 query2 我们事先不知道哪些查询将被组合 假设我有这样的查询 输入查询
  • 从更多元素中仅获取唯一名称

    我动态渲染了 HTML 其中列出了未确定数量的单选按钮 这些按钮的名称代表数据库中的某些 id 我需要收集收音机的所有唯一名称 这是一个例子
  • 将网站加载到 DIV 中

    当我在文本框中写入 URL 然后单击提交按钮时 如何实际从网站检索数据 我希望将数据放入我拥有的 div 中 这可能吗 我已经尝试过这个 但它不起作用
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h
  • 如何从 html 字符串向 jQuery DataTable 添加多行

    我有一个 jQuery DataTable 我想向其中添加 html tr 行 这些行以 html 字符串的形式出现 我可以使用标准 jQuery 将它们添加到表中 但这意味着它们绕过 DataTable 对象 并在重新排序表时丢失 要使用

随机推荐

  • 迁移学习:模型给出不变的损失结果。难道不是训练吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在尝试训练一个回归Inception V3 上的模型 输入是大小为 96 320 3 的图像 总共有 16k 图像 其中 12k 用于训练
  • Silverlight for WP7 中的 FileNotFoundException

    找不到文件或程序集名称 System Windows debug resources Version 2 0 5 0 Culture en US PublicKeyToken 7cec85d7bea7798e 或其依赖项之一 我很确定这与某
  • 蛇线中的网格自动流动?

    我想知道是否可以在列模式下使用 css 网格并以蛇线填充单元格 像这样 01 06 07 12 02 05 08 11 03 04 09 10 对此有什么建议吗 感谢您的帮助 如果我们考虑到你总是有 3 行 这里有一个想法 containe
  • html/css 中的元素可以有小数高度吗?

    我正在一个网站上工作 当我用 firefox 中的 firebug 查看它时 各种元素的高度似乎都是 133 8 像素 而 chrome 中的 firebug lite 报告的高度为 133px 使用相同的方法 这是浏览器渲染的差异 还是只
  • Netlify 和 React Vite:Netlify 在 Vite 和 React 站点中重新加载时显示“找不到页面”

    我有一个用 React JS 构建的网站 我使用 Vite 作为 JS Bundler 问题是 当我在 Netlify 上部署站点并重新加载页面时 它显示 找不到页面 我尝试添加更改vite config jsfile import def
  • ReferenceError:文档未定义 - Firebase appcheck 与 React

    我正在尝试将 appcheck 集成到我的 Firebase React 中 我使用 TypeScript Web 版本 9 我将下面的代码添加到我的functions src index ts中 我的 appcheck 集成代码 cons
  • 通用应用程序:仅构建经典工具包

    我必须从头开始创建一个通用应用程序 首先是经典应用程序 在未来的某个时候 是现代应用程序 我已经使用 Cmd 生成了该应用程序 我已经实现了经典应用程序所需的基础知识 分离了可以在现代应用程序中重用的所有内容 并将其放入共享目录中 问题是
  • read.csv 比 data.table::fread 更快 [重复]

    这个问题在这里已经有答案了 在网上我可以看到我应该使用 data table 和 fread 来加载我的数据 但是当我运行基准测试时 我得到以下结果 Unit milliseconds expr min lq mean median uq
  • UILabel 中的居中文本

    如何使 UILabel 中的文本居中 代码是 yourLabel setTextAlignment UITextAlignmentCenter 或 当然 Obj C 2 0 点语法 yourLabel textAlignment UITex
  • 寄存器与堆栈

    与使用基于堆栈的虚拟机相比 使用基于寄存器的虚拟机到底有哪些优点和缺点 对我来说 基于寄存器的机器似乎更容易编程并且更高效 那么为什么 JVM CLR 和 Python VM 都是基于堆栈的呢 在硬件中实现时 基于寄存器的机器将变得更加高效
  • 在 xcode 中搜索硬编码文本

    您好 我想本地化我的应用程序 但问题是我在 xib 文件中的代码周围都有硬编码文本 我想要快速外部化的方法 或者更好地获取所有硬编码文本并将其放入外部文件中 如果有人之前做过这个 请分享 您可以使用正则表达式在所有项目中进行搜索 Press
  • 使用“存在”进行额外的哈希查找?

    我有时会访问这样的哈希 if exists ids name id ids name 这是好的做法吗 我有点担心它包含两次查找 而实际上应该完成一次查找 有没有更好的方法来检查是否存在并赋值 通过检查exists 你可以阻止自动生存 看Au
  • 如何使用箭头键禁用 FF 中的页面滚动

    我正在构建一个包含主题和项目的菜单 每个主题都可以通过单击展开和折叠 我的任务是使用向上和向下箭头键在菜单主题和项目之间移动成为可能 我已经这样做了 但问题是 当页面大于窗口时 按箭头键时页面会滚动 我尝试过使用 document body
  • 如何合并两个csv文件?

    我有两个这样的 csv 文件 id h1 h2 h3 1 blah blahla 4 bleh bleah 我想合并这两个文件 这样如果两个文件中有相同的 id 则该行的值应该来自第二个文件 如果它们具有不同的 id 则合并的文件应包含这两
  • 无法启动程序运行program_run

    错误的来源 io cdap cdap internal app runtime distributed remote RemoteExecutionTwillRunnerService 543 runtime startup 1 错误信息
  • 为什么GL替你把`gl_Position`除以W而不是让你自己做呢?

    注意 我了解基本数学 据我了解 典型的perspective各种数学库中的函数会生成一个矩阵 将 z 值从 zNear 到 zFar 转换回 1 到 1 但前提是结果除以w 具体问题是 GPU 为你做这件事而不是你自己做这件事能获得什么好处
  • 如何在 Windows 上从 Python 执行 Javascript?

    如何在 Windows 上从 Python 执行 Javascript 我想获得 python spidermonkey 功能 像这样 gt gt gt class Foo def hello self print Hello Javasc
  • 如何自动化 Outlook?

    我正在尝试从我们的 ERP 系统发送电子邮件 我尝试使用 SMTP 但它仅适用于内部邮件 不适用于外部邮件 抱怨无法中继或其他问题 我认为经理要么不想 要么不知道如何正确配置 Exchange 所以我的老板告诉我使用 Outlook 问题是
  • 无法为 log4j 设置 LevelRangeFilter

    我正在使用此属性文件在 Spring 中设置 log4j log4j appender EMAIL org apache log4j net SMTPAppender log4j appender EMAIL filter org apac
  • 每次页面加载时提取随机图像

    在每个页面加载时我都会更改图像 我发现这个插件做得很好 function randomImage defaults you can change these defaults to your own preferences path tem