#jquery #html #css
#jquery #HTML #css
Вопрос:
Эй, ребята, я создал слайд-шоу с помощью jquery cycle, оно содержит элементы управления воспроизведением и паузой, навигацию с вкладками и плавный переход между слайдами, теперь меня попросили скрыть элементы управления воспроизведением и паузой, как только слайд-шоу достигнет слайда номер 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;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;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>
Ответ №1:
Вы могли бы использовать функцию before:(currSlideElement, nextSlideElement, options, 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();
}
}
});
Комментарии:
1. Похоже, это не работает, я пробовал, но это не дает эффекта скрытия / показа.
2. Вам нужно будет изменить ‘element1’ и ‘element6’ для любого фактического элемента. Попадает ли он в строки .show() или .hide()? Вы проверили nextSlideElement, чтобы убедиться, что ожидаемый элемент возвращается?
3. Я не тестировал это, это чисто вопрос ради любопытства, но если
nextSlideElement == 6не означает ли это, что элементы управления будут скрыты на слайде 5? (Я не уверен, откудаnextSlideElementэто взялось, поэтому приношу извинения за любую глупость с моей стороны.)4. nextSlideElement — это фактический элемент, а не индекс, и метод вызывается непосредственно перед началом перехода, поэтому его можно вызвать, используя метод before или метод after, в зависимости от того, как он хочет, чтобы это выглядело.
Ответ №2:
Вам следует использовать одну из функций обратного вызова плагина cycle: http://jquery.malsup.com/cycle/options.html before или after будет полезно.
В функции скрыть элементы управления, если nextSlideElement является последним.