jQuery hide/show
Hey guys, I have created a slide-show using jquery cycle, this contains play and pause controls, tabbed navigation and fade transition between slides, now I've been asked to hide the play and pause controls once the slide-show hits slide number 6 but to have this controls back on when the slide-show starts all over again, I need help creating this function. Please you can find below some of the markup and the js function. Thanks in advance for your help.
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)&l开发者_JAVA百科t;/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 & 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 & 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 function
<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>
You could use the before: function(currSlideElement, nextSlideElement, options, forwardFlag) option to check which element is about to be shown.
If this is element 6 then hide play/pause, if it is element 1 show play/pause.
Something like:
$('#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();
}
}
});
You should use one of the cycle plugin's callback function: http://jquery.malsup.com/cycle/options.html before, or after will be useful.
In the function hide the controls, if the nextSlideElement is the last.
加载中,请稍侯......
精彩评论