Question

我希望动态地将数组值（在本例中为String "../name1.jpg"或"../name2.jpg"）传递给img src <img src="here">。每当你将鼠标悬停在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>

Answer 1

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

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

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

并将您的img src最初设置为""。当然，如果您向img标记添加了id，则可以简化您的jQuery。

修改我设置了一个工作示例here的小提琴。

这是脚本代码：

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

我做的主要事情：

在重新使用之前对要声明的函数进行排序。

摆脱了杀死getImages（）
的int i声明

为了实现这一目标，我经常使用控制台日志，而jsfiddle的JSHint也是一个很大的帮助。

Answer 2

我更喜欢经典的方式：

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

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

P.S。：关注你的随机功能。我的Firefox确实抱怨“（缺少';'在声明之前'）

Answer 3

你可以试试这个

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]);
            }); 
        }
    );        
}

DEMO.

动态地将随机javascript数组值传递给html img src

3 个答案: