2

残念ながら、私はJSの経験がほとんどないので、しばらくお待ちください:p

サイトでバナーを回転させようとしています。バナーを別の場所に配置し、重複がないようにしたいと考えています。バナーが配列にあると、ローテーションに追加するのが簡単になるので、それも素晴らしいでしょう.

これは、私が機能させようとしてきたコードですが、ほとんど成功していません。メモ帳を介してrotate.jsに保存されています

script type="text/javascript">


link = new Array
image = new Array

link[1]="www.audio-philia.co.uk"
image[1]="www.hificornershop.co.uk/nodups/audiophilia.gif"

link[2]="www.emporiumhifi.com"
image[2]="www.hificornershop.co.uk/nodups/emporiumhifi.gif"

link[3]=""
image[3]=""

link[4]=""
image[4]=""

link[5]=""
image[5]=""

link[6]=""
image[6]=""

link[7]=""
image[7]=""

link[8]=""
image[8]=""

link[9]=""
image[9]=""

link[10]=""
image[10]=""


rnd = (Math.round((Math.random()*9)+1))

document.write('<a href="' + link[rnd] + '" target="_blank">'); 
document.write('<img src="' + image[rnd] + '" border="0"></a>');

value = array.splice(rnd,1)[0]; // remove the selected number from the array and get it in another variable

logosElement.innerHTML += (value);
}

</script>

次に、バナーを表示する領域に次をコピーします#

<img src='rotate.js?i=0'>image #1 <img src='rotate.js?i=1'>image #2 <img src='rotate.js?i=2'>image #3

等

特定のページのバナー スポットごとに「i」の値が異なる場合、重複はありません。私はphpで非常によく似たスクリプト作業を行っていましたが、これをJSで動作させたいと思っています。

4

2 に答える 2

3

あなたが取ったアプローチはあなたを助けていません。HTML ソースで img タグを次のように div に置き換えることをお勧めします。

<div class="myImage" id="image1"></div>
<div class="myImage" id="image2"></div>
<div class="myImage" id="image3"></div>

次に、rotate.js ファイルで、次のようなことができます。

window.onload = function() {
    //Find all images with class myImage
    var images = document.getElementsByClassName('myImage');
    var total  = images.length;

    //Looping through all the elements found
    for (var i = 0; i < total; i++) {
        //Retrieve array index from the id
        var index = images[i].id.subtring(4);
        //Add the html to the element
        images[i].innerHTML = '<a href="'+link[index]+'"><img src="'+image[index]+'" /></a>';
    }
}

クラスは、myImage処理するすべての div を簡単に取得するために使用され、id は、div に表示する画像を知るために使用されます。

配列の場合: バナーには Javascript オブジェクトを使用することをお勧めします。Javascript オブジェクトは次のように定義されます: {}、以下の例のようなプロパティがあります: 

var banners = array();

//Image and link are properties
//push is the function to add an element to an array without specifying the index
banners.push({image:your_url, link:your_url});
//The first banner can then be accessed 
banners[0];
//To access its image
banners[0].image;
//Or
banners[0]['image'];

例

回転.jsファイル

var banners = array(); //The first element pushed in the array is at the index 0
banners.push({link: 'www.audio-philia.co.uk', image: 'hificornershop.co.uk/nodups/audiophilia.gif', alt: 'My Image alt'}); 
//Repeat the push for every images

window.onload = function() {
//Find all images with class myImage
var images = document.getElementsByClassName('myImage');
var total  = images.length;

//Looping through all the elements found
for (var i = 0; i < total; i++) {
    if (banners.length == 0) {
          break;//No more banners can't display anymore            
    }
    //Retrieve a random banner 
    var rnd = Math.floor((Math.random()*banners.length));
    //Add the html to the element
    images[i].innerHTML = '<a href="'+banners[rnd].link+'"><img src="'+banners[rnd].image+'" alt="'+banners[rnd].alt+'" /></a>';
    banners.splice(rnd, 1);
}

} </p>

HTML

<div class="myImage"></div>
<div class="myImage"></div>
<div class="myImage"></div>
<!-- The script should be just before the end of the body tag if possible -->
<script type="text/javascript" src="www.hificornershop.co.uk/bannercode/rotate.js"></script>
于 2012-06-07T21:43:35.290 に答える
2

これをベースに遊べます

<script>
        var links = ["http://www.abc.com","http://www.def.com","http://www.ghi.com"];
        var images = ["http://www.abc.com/1.gif","http://www.def.com/2.gif","http://www.ghi.com/3gif"];
        var i = 0;
        var renew = setInterval(function(){
            if(links.length == i){
                i = 0;
            }
            else {
            document.getElementById("bannerImage").src = images[i]; 
            document.getElementById("bannerLink").href = links[i]; 
            i++;

        }
        },10000);
        </script>



<a id="bannerLink" href="http://www.abc.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.abc.com/1.gif" width="694" height="83" alt="some text">
</a>
于 2013-05-09T13:19:34.317 に答える