Javascript jQuery图像滑块不使用jQuery显示/隐藏
我使用的是bxslider（）jQuery图像滑块，当与jQuery show/hide一起使用时，它的行为似乎不稳定。它在台式机上似乎运行良好，但在平板电脑上却不起作用。在tablet上，第一个滑块可以正常工作，但在使用jQuery show/hide点击下一个div时，下一个滑块被破坏。只显示背景图像，然后所有幻灯片都缩小并位于滑块顶部。但是，奇怪的是，当你将平板电脑从纵向旋转到横向，或者从横向旋转到纵向时，它会工作。非常感谢您的帮助。页面如下： 代码：Javascript jQuery图像滑块不使用jQuery显示/隐藏,javascript,jquery,html,show-hide,bxslider,Javascript,Jquery,Html,Show Hide,Bxslider,我使用的是bxslider（）jQuery图像滑块，当与jQuery show/hide一起使用时，它的行为似乎不稳定。它在台式机上似乎运行良好，但在平板电脑上却不起作用。在tablet上，第一个滑块可以正常工作，但在使用jQuery show/hide点击下一个div时，下一个滑块被破坏。只显示背景图像，然后所有幻灯片都缩小并位于滑块顶部。但是，奇怪的是，当你将平板电脑从纵向旋转到横向，或者从横向旋转到纵向时，它会工作。非常感谢您的帮助。页面如下： 代码： 中西部优质肉类
中西部优质肉类
-
-
-
-
切口名称：
纽约牛排
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
胸部
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
丁字牛排
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
胸部
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
顶级牛腰肉牛排
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
胸部
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
牛里脊牛排
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
胸部
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
查克牛排
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
胸部
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
牛肉馅饼
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
切口名称：
胸部
风味特征：
它尝起来像鸡肉。每样东西尝起来都像鸡肉
尺寸：
10-12盎司
建议：
它将乳液放入篮中，否则它将再次获得软管
jQuery（文档）.ready（函数（$）{
$（'#slider1'）.bxSlider({
模式：“水平”，
汽车：错，
自动控制：错误，
暂停：3000，
useCSS:false
});
$（'#slider2'）.bxSlider({
模式：“水平”，
汽车：错，
自动控制：错误，
暂停：3000，
useCSS:false
});
$（'#slider3'）.bxSlider({
模式：“水平”，
汽车：错，
自动控制：错误，
暂停：3000，
我们
<!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"><h2>New York Strip Steak</h2></a></li>
<li><a id="tbone_btn"><h2>T-Bone Steak</h2></a></li>
<li><a id="sirloin_btn"><h2>Top Sirloin Steak</h2></a></li>
<li><a id="filet_btn"><h2>Sirloin Filet Steak</h2></a></li>
<li><a id="chuck_btn"><h2>Chuck Steak</h2></a></li>
<li><a id="beefpatty_btn"><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">
<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">
<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">
<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">
<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">
<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">
<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() {
$("#strip").show();
$("#tbone, #sirloin, #filet, #chuck, #beefpatty").hide();
$("#strip_btn").addClass('active_btn');
$("#strip_btn").click(function () {
$("#strip").fadeIn('slow');
$("#tbone, #sirloin, #filet, #chuck, #beefpatty").hide();
$(this).addClass('active_btn');
$("#tbone_btn, #sirloin_btn, #filet_btn, #chuck_btn, #beefpatty_btn").removeClass('active_btn');
return false;
});
$("#tbone_btn").click(function () {
$("#tbone").fadeIn('slow');
$("#strip, #sirloin, #filet, #chuck, #beefpatty").hide();
$(this).addClass('active_btn');
$("#strip_btn, #sirloin_btn, #filet_btn, #chuck_btn, #beefpatty_btn").removeClass('active_btn');
return false;
});
$("#tbone_btn").click(function() { // button that sets the DIV visible
$("#slider2").show(); // DIV that contain SLIDER
mySlider.reloadShow(); // Reloads the slideshow (bxSlider API function)
});
$("#sirloin_btn").click(function () {
$("#sirloin").fadeIn('slow');
$("#strip, #tbone, #filet, #chuck, #beefpatty").hide();
$(this).addClass('active_btn');
$("#strip_btn, #tbone_btn, #filet_btn, #chuck_btn, #beefpatty_btn").removeClass('active_btn');
return false;
});
$("#sirloin_btn").click(function() { // button that sets the DIV visible
$("#slider3").show(); // DIV that contain SLIDER
mySlider.reloadShow(); // Reloads the slideshow (bxSlider API function)
});
$("#filet_btn").click(function () {
$("#filet").fadeIn('slow');
$("#strip, #tbone, #sirloin, #chuck, #beefpatty").hide();
$(this).addClass('active_btn');
$("#strip_btn, #tbone_btn, #sirloin_btn, #chuck_btn, #beefpatty_btn").removeClass('active_btn');
return false;
});
$("#filet_btn").click(function() { // button that sets the DIV visible
$("#slider4").show(); // DIV that contain SLIDER
mySlider.reloadShow(); // Reloads the slideshow (bxSlider API function)
});
$("#chuck_btn").click(function () {
$("#chuck").fadeIn('slow');
$("#strip, #tbone, #sirloin, #filet, #beefpatty").hide();
$(this).addClass('active_btn');
$("#strip_btn, #tbone_btn, #sirloin_btn, #filet_btn, #beefpatty_btn").removeClass('active_btn');
return false;
});
$("#chuck_btn").click(function() { // button that sets the DIV visible
$("#slider5").show(); // DIV that contain SLIDER
mySlider.reloadShow(); // Reloads the slideshow (bxSlider API function)
});
$("#beefpatty_btn").click(function () {
$("#beefpatty").fadeIn('slow');
$("#strip, #tbone, #sirloin, #filet, #chuck").hide();
$(this).addClass('active_btn');
$("#strip_btn, #tbone_btn, #sirloin_btn, #filet_btn, #chuck_btn").removeClass('active_btn');
return false;
});
$("#beefpatty_btn").click(function() { // button that sets the DIV visible
$("#slider6").show(); // DIV that contain SLIDER
mySlider.reloadShow(); // Reloads the slideshow (bxSlider API function)
});
});
</script>
</body>
</html>
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true
});
$("#processSignUp").click(function() { // button that sets the DIV visible
$("#trainings-slide").show(); // DIV that contain SLIDER
mySlider.reloadShow(); // Reloads the slideshow (bxSlider API function)
});
});
</script>