Hi bx滑块有时无法向用户显示图像。 在这里我们首先隐藏div然后在加载js之后我们将它变为可见 bx滑块div被指定为可见但不向用户显示。请帮帮我.......
这是我的HTML代码：
<html>
<head>
<script src="http://www.jockeyindia.com/javascripts/jquery.bxslider.min.js"></script>
<link href="http://www.jockeyindia.com/css/jquery.bxslider_banner.css" rel="stylesheet"/>
</head>
<body>
<div id="divBannerContainer" class="banner_container" style="visibility: visible;">
<div id="banner">
<div id="ctl00_ContentPlaceHolder1_slideshow">
<div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 370px;"><ul class="bxslider" style="width: 715%; position: relative; transition-duration: 0s; transform: translate3d(-5000px, 0px, 0px);"><li style="float: left; list-style: none; position: relative; width: 1000px;" class="bx-clone">
<a href="women/collection/active?utm_source=homepage&utm_medium=banner&utm_campaign=active-bra-new" id="ctl00_ContentPlaceHolder1_repBanner_ctl04_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/219/LargeImages/active_bra.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl04_BannerImage" alt="Active Bra new" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="sports-and-leisure/products" id="ctl00_ContentPlaceHolder1_repBanner_ctl00_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/222/LargeImages/t_shirt_banner_copy.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl00_BannerImage" alt="Jockey History T-shirt Promo" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="women/collection/international-collection?utm_source=homepage&utm_medium=banner&utm_campaign=ic-black" id="ctl00_ContentPlaceHolder1_repBanner_ctl01_ancBanner" target="_self">
<img src="http://static02.jockeyindia.com/HomePageContentImages/220/LargeImages/ic_woman_black_bra_jockey_shop.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl01_BannerImage" alt="International Collection - Black" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="sports-and-leisure/products?collection=24x7%20men:relax:24x7%20woman" id="ctl00_ContentPlaceHolder1_repBanner_ctl02_ancBanner" target="_self">
<img src="http://static03.jockeyindia.com/HomePageContentImages/221/LargeImages/sleepware.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl02_BannerImage" alt="Sleepwear Men and Women" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="men/collection/sport-performance?utm_source=homepage&utm_medium=banner&utm_campaign=Sport-Performance" id="ctl00_ContentPlaceHolder1_repBanner_ctl03_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/215/LargeImages/sport_performancepush_jockey_shop_online.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl03_BannerImage" alt="Sport Performance - Push" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="women/collection/active?utm_source=homepage&utm_medium=banner&utm_campaign=active-bra-new" id="ctl00_ContentPlaceHolder1_repBanner_ctl04_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/219/LargeImages/active_bra.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl04_BannerImage" alt="Active Bra new" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;" class="bx-clone">
<a href="sports-and-leisure/products" id="ctl00_ContentPlaceHolder1_repBanner_ctl00_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/222/LargeImages/t_shirt_banner_copy.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl00_BannerImage" alt="Jockey History T-shirt Promo" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li></ul></div><div class="bx-controls bx-has-pager bx-has-controls-direction bx-has-controls-auto"><div class="bx-pager bx-default-pager"><div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link">1</a></div><div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div><div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link">3</a></div><div class="bx-pager-item"><a href="" data-slide-index="3" class="bx-pager-link">4</a></div><div class="bx-pager-item"><a href="" data-slide-index="4" class="bx-pager-link active">5</a></div></div><div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div><div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// $('.bxslider').bxSlider({
// auto: true,
// autoControls: true,
// touchEnabled: falsebxsliderbestseller
// });
//$('.bxslider>li').addClass('active-slide');
var slider = $('.bxslider');
slider.bxSlider({
auto: true,
autoHover: true,
autoControls: true,
onSlideAfter: function () {
slider.startAuto();
},
onSliderLoad: function () {
$('#divBannerContainer').css("visibility", "visible");
}
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
对我来说似乎只需要包含jquery库文件。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
我在您的代码中添加了以上行。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://www.jockeyindia.com/javascripts/jquery.bxslider.min.js"></script>
<link href="http://www.jockeyindia.com/css/jquery.bxslider_banner.css" rel="stylesheet"/>
</head>
<body>
<div id="divBannerContainer" class="banner_container" style="visibility: visible;">
<div id="banner">
<div id="ctl00_ContentPlaceHolder1_slideshow">
<div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 370px;"><ul class="bxslider" style="width: 715%; position: relative; transition-duration: 0s; transform: translate3d(-5000px, 0px, 0px);"><li style="float: left; list-style: none; position: relative; width: 1000px;" class="bx-clone">
<a href="women/collection/active?utm_source=homepage&utm_medium=banner&utm_campaign=active-bra-new" id="ctl00_ContentPlaceHolder1_repBanner_ctl04_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/219/LargeImages/active_bra.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl04_BannerImage" alt="Active Bra new" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="sports-and-leisure/products" id="ctl00_ContentPlaceHolder1_repBanner_ctl00_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/222/LargeImages/t_shirt_banner_copy.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl00_BannerImage" alt="Jockey History T-shirt Promo" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="women/collection/international-collection?utm_source=homepage&utm_medium=banner&utm_campaign=ic-black" id="ctl00_ContentPlaceHolder1_repBanner_ctl01_ancBanner" target="_self">
<img src="http://static02.jockeyindia.com/HomePageContentImages/220/LargeImages/ic_woman_black_bra_jockey_shop.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl01_BannerImage" alt="International Collection - Black" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="sports-and-leisure/products?collection=24x7%20men:relax:24x7%20woman" id="ctl00_ContentPlaceHolder1_repBanner_ctl02_ancBanner" target="_self">
<img src="http://static03.jockeyindia.com/HomePageContentImages/221/LargeImages/sleepware.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl02_BannerImage" alt="Sleepwear Men and Women" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="men/collection/sport-performance?utm_source=homepage&utm_medium=banner&utm_campaign=Sport-Performance" id="ctl00_ContentPlaceHolder1_repBanner_ctl03_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/215/LargeImages/sport_performancepush_jockey_shop_online.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl03_BannerImage" alt="Sport Performance - Push" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;">
<a href="women/collection/active?utm_source=homepage&utm_medium=banner&utm_campaign=active-bra-new" id="ctl00_ContentPlaceHolder1_repBanner_ctl04_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/219/LargeImages/active_bra.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl04_BannerImage" alt="Active Bra new" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li>
<li style="float: left; list-style: none; position: relative; width: 1000px;" class="bx-clone">
<a href="sports-and-leisure/products" id="ctl00_ContentPlaceHolder1_repBanner_ctl00_ancBanner" target="_self">
<img src="http://static01.jockeyindia.com/HomePageContentImages/222/LargeImages/t_shirt_banner_copy.jpg" id="ctl00_ContentPlaceHolder1_repBanner_ctl00_BannerImage" alt="Jockey History T-shirt Promo" onerror="this.src='http://static01.jockeyindia.com/images/noimage_318_139.jpg'">
</a>
</li></ul></div><div class="bx-controls bx-has-pager bx-has-controls-direction bx-has-controls-auto"><div class="bx-pager bx-default-pager"><div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link">1</a></div><div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div><div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link">3</a></div><div class="bx-pager-item"><a href="" data-slide-index="3" class="bx-pager-link">4</a></div><div class="bx-pager-item"><a href="" data-slide-index="4" class="bx-pager-link active">5</a></div></div><div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div><div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// $('.bxslider').bxSlider({
// auto: true,
// autoControls: true,
// touchEnabled: falsebxsliderbestseller
// });
//$('.bxslider>li').addClass('active-slide');
var slider = $('.bxslider');
slider.bxSlider({
auto: true,
autoHover: true,
autoControls: true,
onSlideAfter: function () {
slider.startAuto();
},
onSliderLoad: function () {
$('#divBannerContainer').css("visibility", "visible");
}
});
});
</script>
</body>
</html>