1

"../name1.jpg"配列値 (この場合は Stringまたは"../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

最初のホバー関数 ( のあるもの) で画像のソースを変更したいとしますfadeIn。

すでに jQuery を使用しているため、次のようにします。

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

img の src を最初に に設定します""。もちろん、idimg タグに を追加すれば、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 igetImages() を殺していた宣言を取り除きました

ここまで来るのにコンソールログを多用しましたし、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 に答える
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 に答える