0

我有一种图像旋转器，它可以在一定间隔内通过 javascript 滚动图像数组，现在我为每个当前图像添加了一些样式。但这仅在我自己将鼠标悬停在项目上/单击项目时才有效，每当脚本自动交换图像时，图像的风格都不会发生任何变化。所以我想知道的是如何在自动脚本上使用相同的效果。

这是代码

* HTML *

<div class="container-thumbs">
<div><a><img src=".jpg" /></a></div>
<div><a class="active"><img src=".jpg" /></a></div> 
<div><a><img src=".jpg" /></a></div>
</div>

CSS

.container-thumbs{
width: 300px; height: 25; font-size: 18px;
}
.container-thumbs a{
list-style: none; float: left; margin-right: 4px; padding: 5px;
}
.container-thumbs div a:hover, .container-thumbs div a.active {
background-color: #f90;
}

Javascript

(function(){
var rotator = document.getElementById('bigImage');
var imageDir = '../images/headers/';
var delayInSeconds = 5;     
var images = ['.jpg', '.jpg', '.jpg', '.jpg', '.jpg',     
'.jpg', '.jpg'];
var num = 0;
var changeImage = function() {
var len = images.length;
bigImage.src = imageDir + images[num++];
if (num == len)
{num = 0;} 
};
setInterval(changeImage, delayInSeconds * 1000);
})();
4

2 回答 2

0

我认为你必须用旋转器替换 bigImage 因为你 getTheImage

var rotator = document.getElementById('bigImage');
// then u dont use it
bigImage.src = imageDir + images[num++];
// so try to change to
rotator.src=imageDir + images[num++];

祝你好运

于 2012-11-30T12:28:55.293 回答
0

从您的 html 中，没有 ID 为 bigImage 的元素，所以我根本看不到它是如何工作的。

我在中间图片中添加了 ID，如下所示：

<div class="container-thumbs">
    <div><a><img src=".jpg" /></a></div>
    <div><a class="active"><img src=".jpg" id="bigImage" /></a></div> 
    <div><a><img src=".jpg" /></a></div>
</div>

那应该行得通。

另一件事是，这里有充分的理由不使用 jQuery 吗？如果没有别的，我强烈推荐它以实现跨浏览器兼容性。

于 2012-11-30T13:32:10.763 回答