Question

I made default values for my function, but when I want to change them by passing arguments values don’t change?

Here is an JsFiddle example

Here is my markup:

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});​

Answer 1

function(…, options) {
    options = {…};

with this, you just overwrite the options argument. What you want is to extend the default options object with properties from the argument:

function(…, customOptions) {
    var defaults = {…};
    var options = $.extend(defaults, customOptions);
    ...

shorter, less variable confusion:

function(…, options) {
    options = $.extend({…}, options);
    ...