jQuery隱藏/顯示

Question

嘿，我已經創建了一個使用jQuery循環的幻燈片放映，這包含播放和暫停控件，幻燈片之間的標籤導航和淡入淡出轉換，現在我被要求隱藏播放和暫停控件一次幻燈片放映幻燈片編號爲6，但在幻燈片放映重新開始時重新開啓此控件，我需要幫助創建此功能。請你可以在下面找到一些標記和js函數。在此先感謝您的幫助。

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 --> 

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

您可以使用之前：函數（currSlideElement，nextSlideElement，期權，forwardFlag）選項來檢查哪個元素即將被顯示。

如果這是元素6，則隱藏播放/暫停，如果它是元素1顯示播放/暫停。

喜歡的東西：

$('#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

您應該使用週期插件的回調函數之一：http://jquery.malsup.com/cycle/options.htmlbefore，或after將是有益的。
在該功能隱藏控件，如果nextSlideElement是最後一個。