每次页面加载时拉出一张随机图像 [英] Pulling out a random image when page loads every time

问题描述

在每一页加载我正在改变图像。我发现这个插件做的很好。

 （function（$）{
 
 $ .randomImage = {
默认值：{
 
 //你可以改变这些默认值为你自己的喜好。
 path：'/ templates / default / images /'，// change这对你的图像的路径
 myImages：['fab_ad1.jpg'，'fab_ad2.jpg'，'fab_ad3.jpg'] //将图像名称放在这个括号中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; 
 
 //获取数组的大小，从这个
中随机化一个数字//使用这个数字作为数组索引
 
 var imageNamesSize = imageNames.length; 
 
 var lotteryNumber = Math.floor（Math.random（）* imageNamesSize）; 
 
 var winnerImage = imageNames [lotteryNumber]; 
 
 var fullPath = config.path + winnerImage; 
 
 
 //把这个图像放入类的randomImage 
 // alt标签的图像文件中。 
 $（this）.attr（{
 src：fullPath，
 alt：winnerImage 
}）; 
 
 
}）; 
} 
 
}）; 
 
 
 $ b}）（jQuery）; 
  

HTML：

 < img class =shufflesrc =alt =onclick =chooseLink（）> 
  

调用此函数：

  $（ '洗牌。'）randomImage（）; 
  

使用此功能，我在我的页面上显示广告。我为每个广告图片分开链接。当一个图像被点击时，我打电话给一个 javascript 函数，在那里我需要识别图像名称，并相对于我重定向到单独的链接。在我的情况下，我不知道如何识别被点击的图像名称。请告诉我如何识别被点击的图片名称。

希望我的问题清楚。
在此先感谢!!!

解决方案

更改

 < img class =shufflesrc =alt =onclick =chooseLink（）> 
  

至

 < img class =shufflesrc => 
  

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

<$ （）函数（）函数（）{
var imageId = this.src.split（'/'）。pop（）; //这是图像文件的名称
//标识图像
//使用图像
chooseLink（imageId）;
}）;

On each page load i am changing a image. I found this plugin which is doing a great work.

(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()">

Calling this function:

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

Using this feature i am displaying ads in my page. I having separate link for each ad image. When a image is clicked i am calling a javascript function and there i need to identify the image name and with respect to that i am redirecting to the separate link. In my case I dont know how to identify the image name which was clicked. Please suggest me how to identify the image name which was clicked.
Hope my Question is Clear. Thanks in Advance !!!

解决方案

Change

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

to

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

And add this in your script :

$('.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);
});

这篇关于每次页面加载时拉出一张随机图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！