[英]How do I reload jQuery slideshow with jQuery show/hide event?
我正在使用jQuery在页面上显示/隐藏div。 在每个div中,我都有一个jQuery幻灯片。 第一个起作用,但是单击进入下一个div时,滑块损坏。 (请参阅: http : //www.parker-gibson.com/mqm_test/hawkeye_beef.html )。 有人告诉我,每次显示/隐藏事件后都需要重新加载滑块,但是我不知道如何。 不太懂jQuery的人。 谢谢你的帮助!!
码:
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Midwest Quality Meats</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="top-nav">
<nav>
<ul>
<li><a href="#">Partners</a>
<ul>
<li><a href="hawkeye.html">Hawkeye Meats</a></li>
<!--<li><a href="#">...</a></li>-->
<!--<li><a href="#">...</a></li>-->
</ul>
</li>
<li><a href="#">Meats</a>
<ul>
<li><a href="beef.html">Beef</a></li>
<li><a href="pork.html">Pork</a></li>
<li><a href="chicken.html">Chicken</a></li>
</ul>
</li>
<a href="index.html" style="display:block; float:left; margin:0 95px 0 25px;"><img src="img/ribbon.png"></a>
<li><a href="#">About Us</a></li>
<li style="margin-right:15px;"><a href="#">Contact</a></li>
</ul>
</nav>
</div> <!--end top nav-->
<div style="clear:both;"></div>
<div id="nav spacer" style="width:960px; height:80px;">
</div>
<div id="meat-wrap">
<div id="cuts-container">
<div id="hwk-beef-nav-top">
</div>
<div id="cuts">
<ul>
<li><a id="strip_btn" class="buttons"><h2>New York Strip Steak</h2></a></li>
<li><a id="tbone_btn" class="buttons"><h2>T-Bone Steak</h2></a></li>
<li><a id="sirloin_btn" class="buttons"><h2>Top Sirloin Steak</h2></a></li>
<li><a id="filet_btn" class="buttons"><h2>Sirloin Filet Steak</h2></a></li>
<li><a id="chuck_btn" class="buttons"><h2>Chuck Steak</h2></a></li>
<li><a id="beefpatty_btn" class="buttons"><h2>Ground Beef Patty</h2></a></li>
</ul>
</div>
<div id="animal-nav">
<a href="pork.html"><div id="pork-nav" style="border-right:1px solid #000;"></div></a>
<a href="chicken.html"><div id="chicken-nav"></div></a>
</div>
</div>
<!---------------------new york strip------------------------->
<div id="strip">
<div id="cut-slider">
<ul id="slider1" class="sliders">
<li><img src="img/slider-img/strip1.jpg" /></li>
<li><img src="img/slider-img/strip-box.jpg" /></li>
<li><img src="img/slider-img/strip2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">New York Strip Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end strip-->
<!---------------------t-bone------------------------->
<div id="tbone">
<div id="cut-slider">
<ul id="slider2" class="sliders">
<li><img src="img/slider-img/tbone1.jpg" /></li>
<li><img src="img/slider-img/tbone-box.jpg" /></li>
<li><img src="img/slider-img/tbone2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">T-Bone Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end tbone-->
<!---------------------sirloin------------------------->
<div id="sirloin">
<div id="cut-slider">
<ul id="slider3" class="sliders">
<li><img src="img/slider-img/sirloin1.jpg" /></li>
<li><img src="img/slider-img/sirloin-box.jpg" /></li>
<li><img src="img/slider-img/sirloin2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">Top Sirloin Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end sirloin-->
<!---------------------filet------------------------->
<div id="filet">
<div id="cut-slider">
<ul id="slider4" class="sliders">
<li><img src="img/slider-img/filet1.jpg" /></li>
<li><img src="img/slider-img/filet-box.jpg" /></li>
<li><img src="img/slider-img/filet2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">Sirloin Filet Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end filet-->
<!---------------------chuck------------------------->
<div id="chuck">
<div id="cut-slider">
<ul id="slider5" class="sliders">
<li><img src="img/slider-img/chuck1.jpg" /></li>
<li><img src="img/slider-img/chuck-box.jpg" /></li>
<li><img src="img/slider-img/chuck2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">Chuck Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end chuck-->
<!---------------------beefpatty------------------------->
<div id="beefpatty">
<div id="cut-slider">
<ul id="slider6" class="sliders">
<li><img src="img/slider-img/patty1.jpg" /></li>
<li><img src="img/slider-img/patty-box.jpg" /></li>
<li><img src="img/slider-img/patty2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">Ground Beef Patty</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end beefpatty-->
</div> <!--end meat wrap-->
</div> <!--end container-->
<div id="footer"></div>
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#slider1').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider2').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider3').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider4').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider5').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider6').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
});
</script>
<!--show/hide effects-->
<script type = "text/javascript" >
$(document).ready(function() {
function hideContent() {
var l = elements.length;
while (l--) {
$('#' + elements[l]).hide();
}
}
var elements = ['strip', 'tbone', 'sirloin', 'filet', 'chuck', 'beefpatty'];
hideContent();
$('#strip').show();
$("#strip_btn").addClass('active_btn');
$('.buttons').click(function() {
var page = $(this).attr('id').split('_')[0]; //this gives you the target page id
hideContent();
$('.buttons').removeClass('active_btn');
$('#' + page).show();
$(this).addClass('active_btn');
$('.sliders').bxSlider().reloadSlider();
});
});
</script>
</body>
</html>
好的,像这样:
您具有ul元素,这些元素是滑块,并且具有诸如“ slider1”,“ slider2”的ID。
给那些家伙上“滑子”之类的课
然后运行:
$('.sliders').bxSlider().reloadSlider();
重新加载滑块。
您可以在控制台中自己尝试。 例如,当您单击第二个链接:“丁骨牛排”时,滑块断开。 然后打开控制台并运行:
$('#slider2').bxSlider().reloadSlider();
重新加载该滑块。
只需给他们所有人上一堂课,然后在每次单击时重新加载整个课即可。
(可选)要优化所有代码,请为所有链接/按钮提供一个类(例如按钮),并重写以下内容:
<script type = "text/javascript" >
$(document).ready(function() {
function makeSlider($el) {
$el.bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$el.addClass('activeSlider');
}
function hideContent() {
var l = elements.length;
while (l--) {
$('#' + elements[l]).hide();
}
}
var elements = ['strip', 'tbone', 'sirloin', 'filet', 'chuck', 'beefpatty'];
makeSlider($('#slider1'));
hideContent();
$('#strip').show();
$("#strip_btn").addClass('active_btn');
$('.buttons').click(function() {
var page = $(this).attr('id').split('_')[0]; //this gives you the target page id
hideContent();
$('.buttons').removeClass('active_btn');
$('.activeSlider').bxSlider().destroySlider();
$('.activeSlider').removeClass('activeSlider');
$('#' + page).show();
$(this).addClass('active_btn');
makeSlider($('#'+page+' .sliders'));
});
});
</script>
好的,这样一来,我们删除了所有不必要的滑块,只有一个滑块,每当我们显示不同页面时,我们都会对其进行构造和解构。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.