Javascript 每次加载页面时拉出随机图像
在每次加载页面时,我都会更改一个图像。我发现这个插件做得很好Javascript 每次加载页面时拉出随机图像,javascript,jquery,html,Javascript,Jquery,Html,在每次加载页面时,我都会更改一个图像。我发现这个插件做得很好 (function($){ $.randomImage = { defaults: { //you can change these defaults to your own preferences. path: '/templates/default/images/', //change this to the path of your images
(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:
使用此功能,我在页面中显示广告。我有每个广告图像单独的链接。单击图像时,我正在调用javascript
函数,在那里我需要识别图像名称,并将其重定向到单独的链接。在我的情况下,我不知道如何识别被点击的图像名称。请建议我如何识别单击的图像名称。希望我的问题清楚。 提前感谢 变化
<img class="shuffle" src="" alt="" onclick="chooseLink()">
您可以稍微修改图像html:
<img class="shuffle" src="" alt="">
你不能用描述你的图像的onClick事件添加特定的ID吗?我需要识别图像名称,你能演示一下吗?
<img class="shuffle" src="" alt="" onclick="chooseLink()">
<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);
});
<img class="shuffle" src="" alt="">
$('.shuffle').randomImage().click(function(){
var imgsrc = $('.shuffle').attr('src');
var imgname = imgsrc.substr(imgsrc.lastIndexOf('/')+1);
chooseLink(imgname);
});