simple jquery div slideshow

by Chandana Thota

HTML

<div id="slideshow1" class="slide">
        <div>Learn From The Experts </div>
    </div>
    <div id="slideshow2" class="slide" style="display: none">
        <div>With Real time Examples</div>
    </div>
    <div id="slideshow3" class="slide" style="display: none">
        <div>20% Discount on Any Course</div>
    </div>
    <div id="slideshow4" class="slide" style="display: none">
        <div>5 Days Money Back.</div>
    </div>

CSS

.slide {
    height:150px;
    width:600px;
    text-align:center;
    
    display:table;
}

.slide div {
    border:2px solid #fff;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
    color:#fff;
    font-family:monospace;
    font-size:3em;
}
#slideshow1 {   
    background:#4094CA;
}
#slideshow2 {   
    background:#4094CA;
}
#slideshow3 {   
    background:#4094CA;
}
#slideshow4 {   
    background:#4094CA;
}

JavaScript

function startSlides(start, end, delay) {
        setTimeout(slideshow(start,start,end, delay), delay);
    }
    function slideshow(frame, start, end, delay) {
        return (function() {
        $('#slideshow' + frame).fadeOut();
        if (frame == end) { frame = start; } else { frame += 1; }
        setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850);
        setTimeout(slideshow(frame, start, end, delay), delay + 850);
    })
    }
    // usage: startSlides(first frame, end frame, delay time);
    startSlides(1, 4, 5000);