jQuery cacher/montrer

Question

Hey les gars, j'ai créé un diaporama en utilisant jquery cycle, cela contient des contrôles de lecture et de pause, la navigation par onglets et la transition de fondu entre les diapositives, maintenant on m'a demandé de cacher les commandes play et pause le slide-show touche le numéro de la diapositive 6 mais pour que ce contrôle soit rétabli quand le diaporama recommence, j'ai besoin d'aide pour créer cette fonction. S'il vous plaît vous pouvez trouver ci-dessous une partie du balisage et de la fonction js. Merci d'avance pour votre aide.

HTML

  <!-- Page starts here --> 
     <div id="main-content"> 

      <div class="main-info3"> 
       <div id="content"> 

        <!-- change html from here --> 
        <div class="info-w3"> 

         <div class="info-t3"></div><!-- info-t3 --> 
         <div class="info-m3"> 

          <!-- c-caterory2 --> 
          <div class="c-category2" id="slides"> 

           <div class="category"> 
            <img src="images/img1i.jpg" alt="" height="440" width="787" /> 
            <div class="info-w4 info1"> 
             <div class="info-t4"></div> 
             <div class="info-m4"> 
              <h3>By Day</h3> 
              <ul class="datalist"> 
               <li>Serenity - Adult Only Retreat (on select ships)</li> 
               <li>Fitness center, steam room, sauna and outdoor jogging track</li> 
               <li>All pools, including children's wading pool (on select ships) and whirlpool/hot tubs</li> 
               <li>Carnival's Twister Waterslide OR Carnival WaterWorks (varies by ship)</li> 
               <li>Mini Golf</li> 
               <li>Basketball Court/Volleyball court (on select ships)</li> 
               <li>Cozy lounge for small gatherings or quiet reading time</li> 
               <li>Table tennis</li> 
               <li>Poolside entertainment (live music, games, dancing and more)</li> 
              </ul> 
              <p><strong>See all <a href="/cms/fun/promo_content/obx/activities_day.aspx">Daytime Fun</a>.</strong><a name="nighttime" id="nighttime"></a></p> 
             </div> 
             <div class="info-b4"></div> 
            </div> 
           </div><!-- category --> 

           <div class="category"> 
            <img src="images/img2i.jpg" alt="" height="440" width="787" /> 
            <div class="info-w4 info2"> 
             <div class="info-t4"></div> 
             <div class="info-m4"> 
              <h3>At Night</h3> 
              <ul class="datalist"> 
               <li>All onboard clubs, bars and lounges (activities including karaoke, dance lessons and more)</li> 
               <li>Spectacular stage shows</li> 
               <li>Live music, including bands and orchestra</li> 
               <li>Comedy acts and international singers</li> 
               <li>Carnival's Seaside Theater (on select ships)</li> 
              </ul> 
              <p><strong>See all <a href="/cms/fun/promo_content/obx/activities_night.aspx">Nightlife</a>.</strong><a name="dining" id="dining"></a></p> 
             </div> 
             <div class="info-b4"></div> 
            </div> 
           </div><!-- category --> 

           <div class="category"> 
            <img src="images/img3i.jpg" alt="" height="440" width="787" /> 
            <div class="info-w4 info3"> 
             <div class="info-t4"></div> 
             <div class="info-m4"> 
              <h3 title="Dining for all">Dining for all</h3> 
              <ul class="datalist"> 
               <li>Fine Dining in the formal dining rooms (includes lobster and steak served on every cruise)</li> 
               <li>Casual Dining at our Lido restaurant, convenient 24-hour Pizzeria, soft-serve ice cream and frozen yogurt around the clock</li> 
               <li>Sushi Bar</li> 
               <li>Lemonade, coffee, tea, water (from a fountain, not bottled water)</li> 
               <li>Spa Carnival menu offering healthful selections low in calories, fat, sodium and cholesterol</li> 
              </ul> 
              <p><strong>See all <a href="/cms/fun/promo_content/obx/dining.aspx">Food &amp; Drink</a>.</strong><a name="kids" id="kids"></a></p> 
             </div> 
             <div class="info-b4"></div> 
            </div> 
           </div><!-- category --> 

           <div class="category"> 
            <img src="images/img4i.jpg" alt="" height="440" width="787" /> 
            <div class="info-w4 info4"> 
             <div class="info-t4"></div> 
             <div class="info-m4"> 
              <h3 title="For Kids">For Kids</h3> 
              <ul class="datalist"> 
               <li>Camp Carnival for ages 2 through 11</li> 
               <li>Circle "C" for ages 12 through 14</li> 
               <li>Club O2 for ages 15 through 17</li> 
              </ul> 
              <p><strong>See all <a href="/cms/fun/promo_content/obx/youth_programs.aspx">Youth Programs</a>.<a name="rooms" id="rooms"></a></strong></p> 
              <ul class="banners"> 
               <li><a href="/cms/fun/obx/youth_experience/campcarnival.aspx"><img src="images/img1s.gif" width="31" height="48" alt="Description image" /></a></li> 
               <li><a href="/cms/fun/obx/youth_experience/circlec.aspx"><img src="images/img2s.gif" width="39" height="48" alt="Description image" /></a></li> 
               <li><a href="/cms/fun/obx/youth_experience/clubO2.aspx"><img src="images/img3s.gif" width="42" height="48" alt="Description image" /></a></li> 
              </ul> 
             </div> 
             <div class="info-b4"></div> 
            </div> 
           </div><!-- category --> 

           <div class="category"> 
            <img src="images/img5i.jpg" alt="" height="440" width="787" /> 
            <div class="info-w4 info5"> 
             <div class="info-t4"></div> 
             <div class="info-m4"> 
              <h3 title="Accommodations">Accommodations</h3> 
              <ul class="datalist"> 
               <li>Carnival's Comfort Collection in all rooms</li> 
               <li>In-stateroom amenities</li> 
               <li>Attentive 24-hour stateroom service</li> 
               <li>In-stateroom movies</li> 
              </ul> 
              <p><strong>See all <a href="/cms/fun/obx/staterooms/service_amenities.aspx">Rooms &amp; Service</a>.</strong></p> 
             </div> 
             <div class="info-b4"></div> 
            </div> 
           </div><!-- category --> 

           <div class="category" id="hide_test"> 
            <img src="images/img-see-the-savings.jpg" alt="" height="440" width="787" /> 
           </div><!-- category --> 

          </div><!-- c-category2 --> 

          <div id="controls"> 
           <span><a href="" id="play">Play</a></span> 
           <span><a href="" id="pause">Pause</a></span> 
          </div> 
          <!--play and pause controls --> 

         </div><!-- info-m3 --> 


         <ul id="slidenav" class="clearfix"> 
          <li class="slide1"><a href="#">By Day</a></li> 
          <li class="slide2"><a href="#">At Night</a></li> 
          <li class="slide3"><a href="#">Dining for All</a></li> 
          <li class="slide4"><a href="#">For Kids</a></li> 
          <li class="slide5"><a href="#">Accomodations</a></li> 
          <li class="slide6"><a href="#">See the Savings</a></li> 
         </ul> 


        </div><!-- info-w3 --> 
        <!-- changed html ends here --> 

fonction JS

<script type="text/javascript" src="javascript/jquery-latest.js"></script> 
    <script type="text/javascript" src="javascript/jquery.cycle.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('#play').click(function() { $('#slides').cycle('resume'); return false; }); 
      $('#pause').click(function() { $('#slides').cycle('pause'); return false; }); 

      $('#slides').cycle({ 
       fx: 'fade', 
       speed: 500, 
       timeout: 15000, 
       pager: '#slidenav', 
        pagerAnchorBuilder: function(idx, slide) { 
         return '#slidenav li:eq(' + (idx) + ') a' 
        } 
      }); 

     }); 
    </script> 

Answer 1

Vous pouvez utiliser l'avant: l'option fonction (currSlideElement, nextSlideElement options, forwardFlag) pour vérifier quel est l'élément sur le point d'être montré.

S'il s'agit de l'élément 6, masquer lecture/pause, s'il s'agit de l'élément 1, afficher lecture/pause.

Quelque chose comme:

$('#slides').cycle({ 
    fx: 'fade', 
    speed: 500, 
    timeout: 15000, 
    pager: '#slidenav', 
    pagerAnchorBuilder: function(idx, slide) { 
    return '#slidenav li:eq(' + (idx) + ') a' 
    }, 
    before:function(currSlideElement, nextSlideElement, options, forwardFlag){ 
    if (nextSlideElement == element1){ 
     $('#play').show(); 
     $('#pause').show(); 
    } 
    else if (nextSlideElement == element6){ 
     $('#play').hide(); 
     $('#pause').hide(); 
    } 
    } 
}); 

Answer 2

Vous devez utiliser une de la fonction de rappel du plugin cycle: http://jquery.malsup.com/cycle/options.htmlbefore ou after sera utile. Dans la fonction masquer les contrôles, si le nextSlideElement est le dernier.