0
Hi bx滑塊在某些時候並未向用戶顯示圖像。 這裏我們首先隱藏div，然後在加載js之後，我們將其設置爲可見 bx滑塊div被分配爲可見但不顯示給用戶。請幫我.......bx滑塊不起作用
這是我的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">
\t $(document).ready(function() {
\t // \t $('.bxslider').bxSlider({
\t // \t auto: true,
\t // \t autoControls: true,
\t // \t touchEnabled: falsebxsliderbestseller
\t // \t });
\t //$('.bxslider>li').addClass('active-slide');
\t var slider = $('.bxslider');
\t slider.bxSlider({
\t auto: true,
\t autoHover: true,
\t autoControls: true,
\t onSlideAfter: function() {
\t \t slider.startAuto();
\t },
\t onSliderLoad: function() {
\t $('#divBannerContainer').css("visibility", "visible");
\t }
\t });
\t
\t }); \t
</script>
</body>
</html>
你的代碼看起來不壞，別的東西是導致此。嘗試檢查CSS是否顯示爲無。 – Jai
這是我的Html代碼： –
您可以請用HTML發佈您的代碼。 –