 | Jquery Sample Code |
| <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
| | 1:<script type="text/javascript">
| | 2:
| | 3:$(document).ready(function() {
| | 4:
| | 5: //Execute the slideShow
| | 6: slideSwitch();
| | 7:
| | 8:});
| | 9:
| | 10:function slideSwitch() {
| | 11: var $active = $('#slideshow IMG.active');
| | 12:
| | 13: if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
| | 14:
| | 15: var $next = $active.next().length ? $active.next()
| | 16: : $('#slideshow IMG:first');
| | 17:
| | 18: $active.addClass('last-active');
| | 19:
| | 20: $next.css({opacity: 0.0})
| | 21: .addClass('active')
| | 22: .animate({opacity: 1.0}, 1000, function() {
| | 23: $active.removeClass('active last-active');
| | 24: });
| | 25:}
| | 26:
| | 27:$(function() {
| | 28: setInterval( "slideSwitch()", 5000 );
| | 29:});
| | 30:
| | 31:
| | 32:
| | 33:
| | 34:</script>
| | 35:<style type="text/css">
| | 36:
| | 37:#slideshow {
| | 38: position:relative;
| | 39: height:395px;
| | 40:}
| | 41:
| | 42:#slideshow IMG {
| | 43: position:absolute;
| | 44: top:0;
| | 45: left:0;
| | 46: z-index:8;
| | 47:}
| | 48:
| | 49:#slideshow IMG.active {
| | 50: z-index:10;
| | 51:}
| | 52:
| | 53:#slideshow IMG.last-active {
| | 54: z-index:9;
| | 55:}
| | 56:
| | 57:
| | 58:</style>
| | 59:
| | 60:<h1>JQuery Photo changes with transparent effect</h1>
| | 61:<div id="slideshow" style="width:248px;" >
| | 62: <img src="images/pic-1.gif" alt="Flowing Rock" class="active" />
| | 63: <img src="images/pic-2.gif" alt="Grass Blades" title="" alt="" />
| | 64: <img src="images/pic-3.gif" alt="Ladybug" title="" alt="" />
| | 65:</div>
| | 66:
| | 67:
| | 68: |
|