jquery
2016-12-29 13 views 0 likes 
0

いくつかのdiv内の画像を回転させようとしています。私の限定されたjqueryのスキルでこれまでに私が到達したところはここにあります。Divs間で画像を回転する

<div id='pos-1'> 
</div> 
<div id='pos-2'> 
</div> 
<div id='pos-3'> 
</div> 


var image = new Array(); 
    image[0] = "<img src='https://placehold.it/200/09f/fff.png'/></a>"; 
    image[1] = "<img src='https://placehold.it/200/000/fff.png'/></a>"; 
    image[2] = "<img src='https://placehold.it/200/22f/000.png'/></a>"; 
    image[3] = "<img src='https://placehold.it/200/32f/fff.png'/></a>"; 
    image[4] = "<img src='https://placehold.it/200/42f/fff.png'/></a>"; 

var link = new Array(); 
    link[0] = "<a href='http://www.jquery.com'>"; 
    link[1] = "<a href='http://www.microsoft.com'>"; 
    link[2] = "<a href='http://www.yahoo.com'>"; 
    link[3] = "<a href='http://www.msn.com'>"; 
    link[4] = "<a href='http://www.stackoverflow.com'>"; 

var size = image.length; 
var x = Math.floor(size*Math.random()); 
$('#pos-1').append(link[x]+image[x]); 
$('#pos-2').append(link[x]+image[x]); 
$('#pos-3').append(link[x]+image[x]); 

デモ:ここhttps://jsfiddle.net/y0hga2of/

ユーザーがdiv要素をクリックすると、彼/彼女はそのURLに取られるように画像をリンクに関連付けられています。例:image0はlink0に関連付けられ、image1はlink1などに関連付けられます。

ただし、このコードでは、すべてのdivに同じ画像が表示されます。私が欲しいのは、POS-2

  • 画像3/LINK3とのimage4/LINK4の '回転' は中回転しなければならないはずです

    • image0とLINK0は、POS-1
    • イメージ1 /リンク1と画像2 /リンク2に表示されるはずですpos-3

    現在のところ、pos-1には1つの画像しか表示しません。後の段階で、私はpos -1で2つの画像も回転させることができます。同様に私はpos-2に1つの画像しか表示しないかもしれません。私のコードでこの柔軟性をどのように調整できますか?

    ありがとうございました。

  • 答えて

    0

    を見ますあなたの必要性につき:

    jsfiddle.net/y0hga2of/5/

    $(function(){ 
    var image = new Array(); 
        image[0] = "<img src='https://placehold.it/200/09f/fff.png'/></a>"; 
        image[1] = "<img src='https://placehold.it/200/000/fff.png'/></a>"; 
        image[2] = "<img src='https://placehold.it/200/22f/000.png'/></a>"; 
        image[3] = "<img src='https://placehold.it/200/32f/fff.png'/></a>"; 
        image[4] = "<img src='https://placehold.it/200/42f/fff.png'/></a>"; 
    
    var link = new Array(); 
        link[0] = "<a href='http://www.jquery.com'>"; 
        link[1] = "<a href='http://www.microsoft.com'>"; 
        link[2] = "<a href='http://www.yahoo.com'>"; 
        link[3] = "<a href='http://www.msn.com'>"; 
        link[4] = "<a href='http://www.stackoverflow.com'>"; 
    
        var min = 0; 
        var max = 1; 
        var x = Math.floor(Math.random() * (max - min) + min); 
        $('#pos-1').append(link[x]+image[x]); 
    
        min=1; 
        max=3; 
        x = Math.floor(Math.random() * (max - min) + min); 
        $('#pos-2').append(link[x]+image[x]); 
    
        min=3; 
        max=5; 
        x = Math.floor(Math.random() * (max - min) + min); 
        $('#pos-3').append(link[x]+image[x]); 
    }); 
    
    +0

    ありがとうございますが、期待どおりに動作していません。 https://jsfiddle.net/y0hga2of/3/ – IGDev

    +0

    をご覧ください。これは機能しています。 https://jsfiddle.net/y0hga2of/5/ – IGDev

    +0

    https://jsfiddle.net/y0hga2of/5/の回答を変更して、回答としてマークしてこの質問を閉じることができますか?ありがとう、 – IGDev

    1

    あなたは3のためにランダムxの同じ値を文を追加使用している、あなたは以下のようxを毎回再計算する必要があります。

    var x = Math.floor(size*Math.random()); 
    $('#pos-1').append(link[x]+image[x]); 
    x = Math.floor(size*Math.random()); 
    $('#pos-2').append(link[x]+image[x]); 
    x = Math.floor(size*Math.random()); 
    $('#pos-3').append(link[x]+image[x]); 
    

    あなたはこれを試すことができます更新fiddle

    +0

    ありがとうございます。このコードは、image1/link1とimage2/link2が '回転する'ことを確実にpos-2にのみ表示しますか? – IGDev

    +0

    rotateは、選択した時間ごとに間隔を変更し、2または3(pos-2)からのみ選択するように間隔を設定する必要があることを意味します。値をチェックして置き換えてください。 このアップデートを見る[fiddler](https://jsfiddle.net/y0hga2of/4/) –

    +0

    回転すると、ページをリフレッシュすると画像が回転するはずです。申し訳ありませんが私は明確でない場合。 – IGDev

    関連する問題