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

ETC

如果特定页面上每个横幅位置的“i”值不同，则不会有重复。我在 php 中有一个非常相似的脚本工作，我真的很想在 JS 中工作。

4

2 回答 2

3

你采取的方法对你没有帮助。我建议您在 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'];

例子

旋转.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 回答