將當前類添加到自動圖像更改器

我有一種圖像旋轉器，它可以在一定的時間間隔內通過javascript滾動瀏覽圖像數組，現在我爲每個當前圖像添加了一些樣式。但是，只有當我自己將鼠標懸停在項目上/單擊項目上時，只要腳本在auto上交換圖像，就不會在圖像上風格化。所以我想知道的是我如何在自動腳本上使用相同的效果。將當前類添加到自動圖像更改器

下面是代碼

* 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); 
})();

來源

2012-11-30 Dino Excel

我覺得你有與肩更換bigImage因爲在U 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-30 12:28:55 IbrahimAsad

從HTML有一個與bigImage的ID沒有元素，所以我不能看到這是如何工作的所有。

我已經加入了中間圖像中的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-30 13:32:10 rwalter

將當前類添加到自動圖像更改器

回答

相關問題