1. 首页
  2. 问答
  3. jQuery图像滑块不能使用jQuery显示/隐藏

jQuery图像滑块不能使用jQuery显示/隐藏

2013-10-26 75 views
0

我正在使用bxslider（http://bxslider.com/examples/multiple-slideshows）jQuery图像滑块，它似乎在与jQuery显示/隐藏一起使用时行为不正常。它似乎在桌面上工作正常，但不适用于平板电脑。在平板电脑上，第一个滑块可以正常工作，但通过点击到下一个div，使用jQuery show/hide，下一个滑块被打破。只显示背景图像，然后所有幻灯片缩小并放在滑块的顶部。但奇怪的是，当您旋转平板电脑时，从纵向到横向或反之亦然。任何帮助是极大的赞赏。该网页是在这里：http://www.parker-gibson.com/mqm_test/hawkeye_beef.htmljQuery图像滑块不能使用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"><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>

来源

2013-10-26 pixel_priest

回答

0

正如你可以看到我重新加载幻灯片只是DIV（包含滑块）在显示它完美地工作了。

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

来源

2013-10-26 05:22:37

+0

非常感谢。你能告诉我在哪里把我的代码？我并不擅长jQuery –

+0

你已经在一行中初始化了所有的滑块，你必须独立地初始化和cal，只要你显示像mySlider.reloadShow（）; –

+0

接受为答案谢谢 –

相关问题

 相关问题