0

I recently got a simple slide show code and am trying to adjust how long the picture is displayed for before it fades. I have played around with the different variables, however I can't seem to get it to stay for more than 6 seconds which is the defult. I would like it to display for around 15 seconds. This is my first encounter with javascript so bear with me. If someone could point out what I need to do in order to extend the time, I would greatly appreciate it. Thanks in Advanced, Josh

Here is the javascript code:

(function($){  

$.fn.s3Slider = function(vars) {       

    var element     = this;
    var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
    var current     = null;
    var timeOutFn   = null;
    var faderStat   = true;
    var mOver       = false;
    var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
    var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

    items.each(function(i) {

        $(items[i]).mouseover(function() {
           mOver = true;
        });

        $(items[i]).mouseout(function() {
            mOver   = false;
            fadeElement(true);
        });

    });

    var fadeElement = function(isMouseOut) {
        var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
        thisTimeOut = (faderStat) ? 10 : thisTimeOut;
        if(items.length > 0) {
            timeOutFn = setTimeout(makeSlider, thisTimeOut);
        } else {
            console.log("Poof..");
        }
    }

    var makeSlider = function() {
        current = (current != null) ? current : items[(items.length-1)];
        var currNo      = jQuery.inArray(current, items) + 1
        currNo = (currNo == items.length) ? 0 : (currNo - 1);
        var newMargin   = $(element).width() * currNo;
        if(faderStat == true) {
            if(!mOver) {
                $(items[currNo]).fadeIn((timeOut/6), function() {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                            faderStat = false;
                            current = items[currNo];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    } else {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            faderStat = false;
                            current = items[currNo];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    }
                });
            }
        } else {
            if(!mOver) {
                if($(itemsSpan[currNo]).css('bottom') == 0) {
                    $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                            faderStat = true;
                            current = items[(currNo+1)];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    });
                } else {
                    $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                    $(items[currNo]).fadeOut((timeOut/6), function() {
                            faderStat = true;
                            current = items[(currNo+1)];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    });
                }
            }
        }
    }

    makeSlider();

};  

})(jQuery);
4

2 回答 2

1 
var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;

The snippet above sets the current timeout time (4s) which will then be used on the functions below.

I'm not in front of the computer to test this.

Try increasing that value and see if it works.

于 2013-07-25T00:05:05.740 回答
0

Do this in the <head> section of the html markup:

<script type="text/javascript">  // This is the script for the banner slider
    $(document).ready(function() {
        $('slider class= or id= name').s3Slider({
        timeOut: 6500
        });
    });
</script>

Changing the value of timeOut will change how long in milliseconds a slide image will display. In the example above, each image will display for 6.5 seconds.

于 2016-03-16T15:37:10.277 回答