関数のデフォルト値を作成しましたが、引数を渡して変更したい場合、値が変更されませんか?
JsFiddle の例を次に示します。
ここに私のマークアップがあります:
HTML:
<div class='container'>
<img src='https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcRbQ6aMnp7uA2VHgEOY6oU24DcB-ZvoBF_puGTB6kq4c8DyMJr2'/>
<img src='http://www.fullscreensavers.com/pics/nature02l.jpg' />
<img src='http://www.fullscreensavers.com/pics/nature03l.jpg' />
</div>
CSS:
.container{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
margin-top: 50px;
}
.container img{
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
display: none;
}
Javascript:
var InfiniteRotator = {
init: function(domEle, options) {
options = {
itemInterval : 5000,
fadeTime : 2500,
currentItem : 0
};
//count number of items
var numberOfItems = $('img', domEle).length;
//show first item
$('img', domEle).eq(options.currentItem).fadeIn();
//loop through the items
var infiniteLoop = setInterval(function() {
$('img', domEle).eq(options.currentItem).fadeOut(options.fadeTime);
if (options.currentItem == numberOfItems - 1) {
options.currentItem = 0;
} else {
options.currentItem++;
}
$('img', domEle).eq(options.currentItem).fadeIn(options.fadeTime);
}, options.itemInterval);
}
};
InfiniteRotator.init($(".container"),{currentItem: 1});