Question

不幸的是，我对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

等

如果＆＃39; i＆＃39;的价值对于特定页面上的每个横幅广告都不同，不会有重复。我在php中有一个非常相似的脚本工作，我真的很喜欢这个在JS工作。

Answer 1

你采取的方法并没有帮助你。我建议你在HTML源代码中用div替换你的img标签：

<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'];

示例

rotate.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); }

}

HTML

<div class="myImage"></div> <div class="myImage"></div> <div class="myImage"></div>  <script type="text/javascript" src="www.hificornershop.co.uk/bannercode/rotate.js"></script>

Answer 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>

使用URL链接旋转横幅，没有重复项

2 个答案: