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

getTheImage があるため、bigImage を rotator に置き換える必要があると思います。

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には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>

それはうまくいくはずです。

もう 1 つ、ここで jQuery を使用しない正当な理由はありますか? 他に何もない場合でも、クロスブラウザーの互換性のために強くお勧めします。

于 2012-11-30T13:32:10.763 に答える