1

我想动态地将一个数组值（在本例中为 String"../name1.jpg"或"../name2.jpg"）传递给 img src <img src="here">。每次将鼠标悬停在“Class of 2013”​​上时，随机图像会淡入，然后淡出。

是否可以通过这样调用它来传递一个值？<img src="getImages();?

你会怎么做？

var ImgArray = new Array();
ImgArray[0] = "../name1.jpg";
ImgArray[1] = "../name2.jpg";

$(document).ready(function() {
    show();
});

function show(){
    $(".box").hover(
        function(){ $(this).find(".overlay").fadeIn(); } ,
        function(){ $(this).find(".overlay").fadeOut(); }
    );        
}

function getImages() {
    int i = Math.random() * (max - min) + min;          
    return ImgArray[i];
}

HTML：

<div class="box">
    Class of 2013:
    <div class="overlay"> <!-- Put images to display here...--> 
        <img src="getImages();" alt="image to be displayed" />
    </div>
</div>​

谢谢

编辑：当前代码：

<html>
<head>
    <script src="jquery.js"></script>

    <script type="text/javascript">     
        var ITLP = new Array();
        ITLP[0] = "/corp/itlp/ITLP%20Bios/DanTurcotte.jpg";
        ITLP[1] = "/corp/itlp/ITLP%20Bios/gomezwilmann.jpg";


        $(document).ready(function() {
            showimg();
        });


        function showimg()
            {
                $(".box > .overlay > img").attr("src",getImages());
                $(".box").hover(
                    function(){ $(this).find(".overlay").fadeIn(); } ,
                    function(){ $(this).find(".overlay").fadeOut(); }
                );        
            }

        function getImages() {
            int i = Math.abs(Math.random());            
            return ITLP[0];             
        }

    </script>


</head> 
<body>

    <div class="box">
        Class of 2013:
        <div class="overlay"> <!-- Put images to display here...-->                 
            <img src="" border="none"/>     
        </div>  
    </div>​

</body>
</html>
4

3 回答 3

1

你可以试试这个

var ImgArray = new Array();
// add images

$(document).ready(show);

// Show function
function show(){
    $('img').attr('src', ImgArray[0]).parent().hide();
    var max = ImgArray.length;
    $(".box").hover(
        function(){ $(this).find(".overlay").fadeIn(); },
        function(){ 
            var img = $(this).find(".overlay").find('img');
            var i = Math.floor(Math.random()*max);
            $(this).find(".overlay").fadeOut(function(){
                img.attr('src', ImgArray[i]);
            }); 
        }
    );        
}

演示。

于 2013-07-23T15:39:50.897 回答
1

您想在第一个悬停功能（带有 的功能fadeIn）中更改图像的来源。

由于您已经在使用 jQuery，只需执行以下操作：

    function(){ $(this img).attr("src", getImages()); $(this).find(".overlay").fadeIn(); } ,

并将您的 img 的 src 最初设置为"". 当然，如果您id在 img 标签中添加了一个，您可以简化您的 jQuery。

编辑我在这里 设置了一个工作示例的小提琴。

这是脚本代码：

   var ITLP = [];
   ITLP[0] = "http://lorempixel.com/400/200/nature";
   ITLP[1] = "http://lorempixel.com/400/200/city";

   function getImages() {
       var i = Math.floor(Math.random() * (ITLP.length + 1)); // from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FMath%2Frandom
       console.log(ITLP[0]);
       return ITLP[0];
   }

   function showimg() {
       $(".box").hover(

       function () {
           console.log("Hover start");
           $(".box > .overlay > img").attr("src", getImages());
           $(this).find(".overlay").fadeIn();
       },

       function () {
           console.log("Hover end");
           $(this).find(".overlay").fadeOut();
       });
   }


   showimg();

我做过的主要事情：

  • 在使用之前订购要声明的函数。
  • 摆脱了int i杀死 getImages() 的声明

为了做到这一点，我经常使用控制台日志，而且 jsfiddle 的 JSHint 也有很大帮助。

于 2013-07-23T14:57:31.093 回答
1

我更喜欢经典的方式：

    $(".box > .overlay > img").attr("src",getImages());

扩大：

function show()
{
    $(".box > .overlay > img").attr("src",getImages());
    $(".box").hover(
        function(){ $(this).find(".overlay").fadeIn(); } ,
        function(){ $(this).find(".overlay").fadeOut(); }
    );        
}

我认为您请求的方式不起作用，因为浏览器需要一个字符串作为源属性。

PS：注意你的随机函数。我的 Firefox 确实抱怨了一些“（在声明之前缺少';'”）

于 2013-07-23T14:57:54.990 回答