Reputation: 3469

Need JQuery Help, pause and resume slideshow

Is there any way to pause/resume this slideshow?

var timer = setInterval(function () {
    $('.fadein :first-child').fadeOut(1000)
        .next('img').fadeIn(1000)
        .end().appendTo('.fadein').end();

    $('.pc').text($("img:visible").prop("alt"));
}, 6500);

Here is the whole page, the problem is when I change this function then images in the background display when the page loads. The images are different sizes which make this tricky

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title></title>
    <script src="jquery.min.js"></script>
    <script>window.jQuery || document.write(unescape('%3Cscript src="http://api.jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
    <script src="jquery-migrate-1.1.1.min.js"></script>
    <style>
    html {
    height: 100%;
    }
  #content{
    /*background-color:#ffffff;*/
    background-image:url('Shadow.jpg');
    background-repeat:repeat-y;
    width:1054px;
    /*height:100%;*/
    min-height:970px;
    margin-right:auto;
    margin-left:auto;
  }
  #title{
    width:855px;
    height:30px;
    background-color:#afa87a;
    margin-right:auto;
    margin-left:auto;
  }
  #title p{
    font-family:Verdana;
    color:#ffffff;
    padding-top:5px;
    padding-left:10px;
    margin-left:28px;
    font-size:13px;
    }
  #left{
      width:390px;
      float:left;
      padding-left:80px;
      padding-right:45px;
      padding-top:50px;
      margin-left:12px;
  }
  #right{
      width:415px;
      float:right;
      padding-top:57px;
  }
  #left p{
    font-family:Verdana;
    color:#000000;
    padding-top:5px;
    padding-left:10px;
    font-size:12px;
  }
  #footer p
  {
       font-family:Verdana;
    color:#000000;
    padding-top:5px;
    padding-left:10px;
    font-size:12px;

  }
  h1{
     font-family:Verdana;
    font-size:14px;
    margin-left:9px;
  }
  a
  {
      color:White;
      text-decoration:none;
  }
  a:hover
  {
      text-decoration:underline;
  }
  ul
  {
      margin-left:-15px;
  }
  ul li
  {
   margin-top:-5px;   
  }
 li p{margin-left:-7px;}
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
.caption { position:relative; height:332px; width:500px; }
.caption img { position:absolute; left:0; top:0; }
.captext
{
    font-family:Tahoma;
    font-size:14px;
    padding-top:15px;
    padding-right:15px;
    padding-left:15px;
}
#footer
{
    padding-top:30px;
    margin-left:auto;
    margin-right:auto;
    width:1054px;
}
.pc
{
    margin-top:200px;
}
</style>
</head>
<body style="background-color:#f0e8b0;height:100%;width:100%;margin:0;">

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('.fadein img:gt(0)').hide();
            $('.pc').text($("img:visible").prop("alt"));

        /*    $(".fadein").mouseover(function () {
                //$(this).stop();
                clearInterval(timer);
                return false;
            });*/

           var timer = setInterval(function () {
                $('.fadein :first-child').fadeOut(1000)
                    .next('img').fadeIn(1000)
                    .end().appendTo('.fadein').end();

                $('.pc').text($("img:visible").prop("alt"));
            }, 6500);
        });
    });
</script>
    <div id="content">
        <img src="62e.jpg" style="width:851px;margin-left:100px;" alt=""/>
        <div id="title"><p>Greenville, South Carolina 29605  <strong>·</strong>  Contact Emelia  <strong>·</strong>  864-200-0000  <strong>·</strong>  <a href="mailto:[email protected]">[email protected]</a></div>


    <div id="left">

        <h1>Beautiful Country Club/Traxler Park Home</h1>
        <p>Located in the Greenville Country Club/Traxler Park neighborhood, this lovely home, built in 1946, has been extensively renovated, with high ceilings and hardwood floors throughout. Convenient to downtown, yet offers the ambiance of a creekside mountain retreat.</p>

        <ul>
        <li><p>Two and a half stories including : 4 bedrooms, 3 1/2 baths, living room, dining room, den, office/library, eat-in kitchen , screened porch, playroom, exercise area, laundry, workshop, 2-car garage. 4100 square feet.</p></li>

        <li><p>New 30-year roof, Hardiplank siding, gutters, custom shutters, paint and insulation in May 2011. All windows replaced.</p></li>

        <li><p>Other extras include security system, generator, whole house fan.</p></li>

        <li><p>Beautifully landscaped with sun and shade gardens and stone walls. The creek on 2 sides is spanned by a stone bridge. Highlights include a large magnolia, huge rhododendron, hemlocks and hardwood trees. Irrigation system for lawn and beds.</p></li>

        </ul>
        <br />
        <strong><p><u>Main Floor</u></p></strong>
        <ul>
        <li><p>Gracious entrance foyer with staircase and coat closet.</p></li>

        <li><p>Large Living Room (23 x 15) with vented gas fireplace, double French door leading to screened porch, windows with views of woods and lawn.</p></li>

        <li><p>Large Den (18 x 15 1/2) with vented gas fireplace, custom mantle. Custom wainscoting. Built-in cabinet for TV and stereo, speakers in ceiling. Bookcases, window seat. Walk-in storage closet. Ceiling fan.</p></li>

        <li><p>Open Kitchen (14 x 14) Custom maple island with sink and seating. Corian counters with integrated, oversized double sink. Coffee garage. Double Jenn-Aire ovens, Thermador solid surface cooktop, Miele stainless steel dishwasher. Walk in pantry (8 1/2 x 5) with wine cooler, plumbed for washer and dryer. Breakfast area adjoining (9 1/2 x 9). Sound system.</p></li>

        <li><p>Dining Room (14 x 14) with Brunschwig et Fils wallpaper, door to screened porch and windows overlooking the woods and creek is the perfect place for family dinners and dinner parties.</p></li>

        <li><p>Screened porch (15 x 14) overlooking the woods and creek. Ceiling fan. Brick floor. Enjoyable spot for morning coffee while listening to the birds, as well as evening suppers listening to owls and tree frogs.</p></li>

        <li><p>Office/Library (10 x 9) with built-in bookcases.</p></li>

        <li><p>Powder room. Off of office/library. Schumacher toile wallpaper. Pedestal sink.</p></li>

        </ul>
        <br />
<strong><p><u>Upstairs</u></p></strong>
        <ul>
        <li><p>Generously sized (18 1/2 x 13) master bedroom with 4 windows with plantation shutters, seating area, and 7 1/2 x 4 1/2 entry. Linen closet and 10 1/2 x 5 walk-in cedar closet. Ceiling fan.</p></li>

        <li><p>Master bath (13 x 11) with custom teak cabinetry, heated towel warmer, double lavatories, built-in vanity, soaking tub, separate shower and toilet alcove.  Large (13 x 7 1/2) walk-in closet and dressing area accessed from bathroom. Audio system.</p></li>

        <li><p>Bedroom #2 (14 x 10 1/2) with double closet and views of creek and woods. Ceiling fan.</p></li>

        <li><p>Bedroom #3 (15 x 12) with views of woods and lawn.</p></li>

        <li><p>Bedroom #4 (10 1/2 x 9 1/2) smaller room with lovely views. Ceiling fan. Wired for telephone and fax. Ideal home office or nursery.</p></li>

        <li><p>Hall bath with combination tub-shower, solid surface vanity with integrated sink. Solid surface shower walls.</p></li>

        </ul>
        <br />
<strong><p><u>Lower Level</u></p></strong>
        <ul>
        <li><p>Recreation room (19 1/2 x 13 1/2) with exercise alcove (14 1/2 x 8). Built-in bench storage plus large walk-in storage closet (17 x 9 1/2). Floor to ceiling windows. Full bath with shower.</p></li>

        <li><p>Laundry room (22 x 8) with built-in shelving. Space for extra refrigerator and wine storage.</p></li>

        <li><p>Workshop/mechanical room (23 x 15).</p></li>

        <li><p>Two-car open garage connected to house by breezeway.</p></li>

        </ul>
        <br />
<strong><p><u>Property</u></p></strong>
        <ul>
        <li><p>Secluded lot on .333 acres, with abundant hardwood trees, adjacent to the Greenville Country Club.</p></li>

        <li><p>Private and peaceful wooded setting with mature evergreens, rock walls and spring-fed creek with stone bridge.</p></li>

        <li><p>Meticulously landscaped.  Shade gardens include specimen Lenten roses, numerous varieties of fern, hostas, trillium, and rhododendron. Grounds also have mature boxwood, hydrangeas, gardenia, climbing hydrangea and a large magnolia. There are a herb garden and a daylily garden. The cutting garden with salvias, phlox, Mexican sage, lavender, daisies and veronica can be viewed from the kitchen window.</p></li>

        <li><p>Automated irrigation system with separate ground water meter.</p></li>

        <li><p>Custom grounds lighting</p></li>

        </ul>
        <br />
<strong><p><u>Schools</u></p></strong>
        <ul>
        <li><p>Elementary - Blythe Academy of Languages</p></li>

        <li><p>Hughes Middle School</p></li>

        <li><p>Greenville Senior High School</p></li>

        <li><p>Convenient to Christ Church Episcopal School, St. Joseph's and numerous pre-schools.</p></li>

        </ul>           
    </div>
    <div id="right">

    <div id="slideshow" class="fadein"> <img src="imgs/1.jpg" alt="Mailbox and Driveway and Front View" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/2.jpg" alt="Exterior Front" style="border:3px solid #afa87a;margin-left:-120px;"/> 
      <img src="imgs/3.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/4.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/5.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/6.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/7.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/8.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/9.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/10.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/11.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/12.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/13.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/14.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/15.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/16.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/17.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/18.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/19.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/20.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/21.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/22.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/23.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/24.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/25.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/26.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/27.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/28.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/29.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/30.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/31.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/32.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
      <img src="imgs/33.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/34.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/35.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/36.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/37.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/38.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/39.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/40.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/41.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/42.jpg" alt="" style="border:3px solid #afa87a;margin-left:-125px;"/> 
      <img src="imgs/43.jpg" alt="" style="border:3px solid #afa87a;margin-left:-66px;"/> 
    </div>
     <!-- <div class="caption">

      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Mailbox and Driveway and Front View</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Exterior Front</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Exterior Front</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Property, yard and landscaping</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Property, yard and landscaping</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Property, yard and landscaping</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Property, yard and landscaping</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Property, yard and landscaping</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Property, yard and landscaping</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Back Exterior View</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Screened porch (15x14) overlooking the woods and creek. Ceiling fan. Brick floor. Enjoyable spot for morning coffee while listening to the birds, as well as evening suppers listening to owls and tree frogs.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Screened porch (15x14) overlooking the woods and creek. Ceiling fan. Brick floor. Enjoyable spot for morning coffee while listening to the birds, as well as evening suppers listening to owls and tree frogs.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Screened porch (15x14) overlooking the woods and creek. Ceiling fan. Brick floor. Enjoyable spot for morning coffee while listening to the birds, as well as evening suppers listening to owls and tree frogs.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Screened porch (15x14) overlooking the woods and creek. Ceiling fan. Brick floor. Enjoyable spot for morning coffee while listening to the birds, as well as evening suppers listening to owls and tree frogs.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Two-car open garage connected to house by breezeway.</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Side View of the exterior.</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Open Kitchen (14 x 14) Custom maple island with sink and seating. Corian counters with integrated, oversized double sink. Coffee garage. Double Jenn-Aire ovens, Thermador solid surface cooktop, Miele stainless steel dishwasher. Walk in pantry (8 ½ x 5) with wine cooler, plumbed for washer and dryer. Breakfast area adjoining (9 ½ x 9). Sound system.</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Open Kitchen (14 x 14) Custom maple island with sink and seating. Corian counters with integrated, oversized double sink. Coffee garage. Double Jenn-Aire ovens, Thermador solid surface cooktop, Miele stainless steel dishwasher. Walk in pantry (8 ½ x 5) with wine cooler, plumbed for washer and dryer. Breakfast area adjoining (9 ½ x 9). Sound system.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Open Kitchen (14 x 14) Custom maple island with sink and seating. Corian counters with integrated, oversized double sink. Coffee garage. Double Jenn-Aire ovens, Thermador solid surface cooktop, Miele stainless steel dishwasher. Walk in pantry (8 ½ x 5) with wine cooler, plumbed for washer and dryer. Breakfast area adjoining (9 ½ x 9). Sound system.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Open Kitchen (14 x 14) Custom maple island with sink and seating. Corian counters with integrated, oversized double sink. Coffee garage. Double Jenn-Aire ovens, Thermador solid surface cooktop, Miele stainless steel dishwasher. Walk in pantry (8 ½ x 5) with wine cooler, plumbed for washer and dryer. Breakfast area adjoining (9 ½ x 9). Sound system.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Open Kitchen (14 x 14) Custom maple island with sink and seating. Corian counters with integrated, oversized double sink. Coffee garage. Double Jenn-Aire ovens, Thermador solid surface cooktop, Miele stainless steel dishwasher. Walk in pantry (8 ½ x 5) with wine cooler, plumbed for washer and dryer. Breakfast area adjoining (9 ½ x 9). Sound system.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Open Kitchen (14 x 14) Custom maple island with sink and seating. Corian counters with integrated, oversized double sink. Coffee garage. Double Jenn-Aire ovens, Thermador solid surface cooktop, Miele stainless steel dishwasher. Walk in pantry (8 ½ x 5) with wine cooler, plumbed for washer and dryer. Breakfast area adjoining (9 ½ x 9). Sound system.</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">(Large) Den (18 x 15 1/2) with vented gas fireplace, custom mantle. Custom wainscoting. Built-in cabinet for TV and stereo, speakers in ceiling. Bookcases, window seat. Walk-in storage closet. Ceiling fan.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">(Large) Den (18 x 15 1/2) with vented gas fireplace, custom mantle. Custom wainscoting. Built-in cabinet for TV and stereo, speakers in ceiling. Bookcases, window seat. Walk-in storage closet. Ceiling fan.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">(Large) Den (18 x 15 1/2) with vented gas fireplace, custom mantle. Custom wainscoting. Built-in cabinet for TV and stereo, speakers in ceiling. Bookcases, window seat. Walk-in storage closet. Ceiling fan.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Dining Room (14 x 14) with Brunschwig et Fils wallpaper, door to screened porch and windows overlooking the woods and creek is the perfect place for family dinners and dinner parties.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Dining Room (14 x 14) with Brunschwig et Fils wallpaper, door to screened porch and windows overlooking the woods and creek is the perfect place for family dinners and dinner parties.</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Gracious entrance foyer with staircase and coat closet.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">(Large)Living Room (23 x 15) with vented gas fireplace, double French door leading to screened porch, windows with views of woods and lawn.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">(Large)Living Room (23 x 15) with vented gas fireplace, double French door leading to screened porch, windows with views of woods and lawn.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Office/Library (10 x 9) with built-in bookcases.</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Powder room. Off of office/library. Schumacher toile wallpaper. Pedestal sink.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Generously sized (18 ½ x 13) master bedroom with 4 windows with plantation shutters, seating area, and 7 ½ x 4 ½ entry. Linen closet and 10 ½ x 5 walk-in cedar closet. Ceiling fan.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Generously sized (18 ½ x 13) master bedroom with 4 windows with plantation shutters, seating area, and 7 ½ x 4 ½ entry. Linen closet and 10 ½ x 5 walk-in cedar closet. Ceiling fan.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Master bath (13 x 11) with custom teak cabinetry, heated towel warmer, double lavatories, built-in vanity, soaking tub, separate shower and toilet alcove.  Large (13 x 7 1/2) walk-in closet and dressing area accessed from bathroom. Audio system.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Master bath (13 x 11) with custom teak cabinetry, heated towel warmer, double lavatories, built-in vanity, soaking tub, separate shower and toilet alcove.  Large (13 x 7 1/2) walk-in closet and dressing area accessed from bathroom. Audio system.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Master bath (13 x 11) with custom teak cabinetry, heated towel warmer, double lavatories, built-in vanity, soaking tub, separate shower and toilet alcove.  Large (13 x 7 1/2) walk-in closet and dressing area accessed from bathroom. Audio system.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Bedroom #2 (14 x 10 1/2) with double closet and views of creek and woods. Ceiling fan.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Bedroom #2 (14 x 10 1/2) with double closet and views of creek and woods. Ceiling fan.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Bedroom #2 (14 x 10 1/2) with double closet and views of creek and woods. Ceiling fan.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Bedroom #3 (15 x 12) with views of woods and lawn.</div>
      <div style="width:470px;height:145px;background-color:white;margin-top:55px;margin-left:-110px;" class="captext">Bedroom #4 (10 ½ x 9 1/2) smaller room with lovely views. Ceiling fan. Wired for telephone and fax.  Ideal  home office or nursery.</div>
      <div style="width:345px;height:145px;background-color:white;margin-top:180px;margin-left:-60px;" class="captext">Hall bath with combination tub-shower, solid surface vanity with integrated sink.  Solid surface shower walls.</div>

      </div>-->

    </div>
    <div style="clear:both;"></div>
    <div id="footer">
    <br />
            <br />
        <br />
    </div>
   </div>
</body>
</html>

Upvotes: 2

Answers (4)

carrabino

Reputation: 1762

i think this technique could work:

UPDATE: working fiddle:
http://jsfiddle.net/8Ybfx/2/

jquery code

// jquery = global vars to manage the stae
var timer = null;
var current = null;

$(document).ready(function(){
    // set up the pause click event
    $("#pause").hide();
    $("#pause").on("click", function(){
        clearInterval(timer);
        $("#pause").hide();
        $("#play").show();
    });

    // set up the play click event
    $("#play").on("click", function(){

        // keep track of the timer
        timer = setInterval(function () {
                    var el = null;
                    if (current != null){
                        el = current;
                    }else{
                        el = $('.fadein :first-child');
                    }

                    // keep track of the current image being displayed 
                    // (i.e. where you left off)
                    current = $(el).fadeOut(1000).next('p');
                    current.fadeIn(1000).end().appendTo('.fadein').end();

                    $('.pc').text($("img:visible").prop("alt"));

                }, 2000);
        $("#play").hide();
        $("#pause").show();
    }); 
});

html (used p for testing, change p to img)

<div id="pause" class="btn">pause</div>
<div id="play" class="btn">play</div>

<div class="fadein">
    <p>image 1</p>
    <p>image 2</p>
    <p>image 3</p>
    <p>image 4</p>    
</div>

CSS:

/* In your live case, change p to img */
.fadein p{
    display: none;
}

.btn{
    cursor: pointer;
    cursor: hand;
}

Upvotes: 1

Atle

Reputation: 5447

Yes, several. You can stop the execution with clearInterval(timer). You can set a variable elsewhere, which you checks in your function. And you can use setTimeout() and call it every time.

Upvotes: 0

Manse

Reputation: 38147

Separate out the function and the interval ... something like

var timer = setInterval(runMe, 6500);

function runMe() {
    $('.fadein :first-child').fadeOut(1000)
       .next('img').fadeIn(1000)
       .end().appendTo('.fadein').end();

    $('.pc').text($("img:visible").prop("alt"));
}

function stop() {
    clearInterval(timer);
}

function resume() {
    timer = setInterval(runMe, 6500);
}

Docs for clearInterval() here

Note: completely untested - but you get the idea

As per comments ... then bind some buttons / links to the functions

$('#stopMe').click(stop);
$('#resumeMe').click(resume);

Upvotes: 2

Qurben

Reputation: 1316

There is clearInterval

clearInterval(timer)

This stops/pauses the interval, to resume use setInterval again

Upvotes: 0

Need JQuery Help, pause and resume slideshow

Answers (4)

Related Questions