我在我的网站上使用jCaraousel来显示带有简短描述的广告。图像工作正常但由于某种原因文本没有显示,它看起来像这样:
按钮允许您在图像之间来回滚动,但标签不会显示。
这是html:
<script type="text/javascript" src="/Custom/Supabets/Scripts/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="/Custom/Supabets/Scripts/jquery.jcarousel-autoscroll.min.js"></script>
<script type="text/javascript" src="/Custom/Supabets/Scripts/jquery.jcarousel-control.min.js"></script>
<script type="text/javascript" src="/Custom/Supabets/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Custom/Supabets/Scripts/Supabets.js"></script>
<div class="homecontent" id="content">
<div class="wrapper">
<div class="banner-carousel">
<ul>
<li id="banner-1"><a href="/Account/NewUser.aspx" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_3EasySteps.png" />
</a></li>
<li id="banner-2"><a href="/Pages/Promotion/Sport" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_MultipleBetSpecial.png" />
</a></li>
<li id="banner-3"><a href="/Pages/Promotion/Sport" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_MoneyBackBonus.png" />
</a></li>
<li id="banner-4"><a href="/Pages/Promotion/Sport" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_RegistrationBonus.png" />
</a></li>
<li id="banner-5"><a href="/Pages/Promotion/Sport" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_FreeDelivery.png" />
</a></li>
<li id="banner-6"><a href="/Pages/Promotion/Sport" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_SuggestionBonus.png" />
</a></li>
<li id="banner-7"><a href="/Pages/Promotion/Sport" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_BuyBackBonus.png" />
</a></li>
<li id="banner-8"><a href="/Pages/Promotion/Sport" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_MobileVouchers.png" />
</a></li>
<!-- <li id="banner-9"><a href="/Pages/Promotion/Sport" target="_top">
<img alt="" src="/Custom/Supabets/Images/tdDXAdvertRolling_MobileVouchers.png" />
</a></li>-->
</ul>
<div class="banner-carousel-controls">
<div class="carousel-label display-inline-block">
<div class="banner-control banner-control-1">
<h2>
<a href="/Account/NewUser.aspx" target="_top">Easy Registration</a></h2>
<p>
Three easy Steps!</p>
<a href="/Account/NewUser.aspx" target="_top">Read more ...</a></div>
<div class="banner-control banner-control-2">
<h2>
<a href="/Pages/Promotion/Sport" target="_top">Multiple Special</a></h2>
<p>
Gives you more winnings!</p>
<a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
<div class="banner-control banner-control-3">
<h2>
<a href="/Pages/Promotion/Sport" target="_top">Money Back
Bonus</a></h2>
<p>
We give back!</p>
<a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
<div class="banner-control banner-control-4">
<h2>
<a href="/Pages/Promotion/Sport" target="_top">Registration
Bonus</a></h2>
<p>
50% extra!</p>
<a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
<div class="banner-control banner-control-5">
<h2>
<a href="/Pages/Promotion/Sport" target="_top">Free delivery</a></h2>
<p>
We deliver to your door!</p>
<a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
<div class="banner-control banner-control-6">
<h2>
<a href="/Pages/Promotion/Sport" target="_top">Bonus Suggestion</a></h2>
<p>
We want your help!</p>
<a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
<div class="banner-control banner-control-7">
<h2>
<a href="/Pages/Promotion/Sport" target="_top">Buy Back Bonuses</a></h2>
<p>
We will do a buy-back!</p>
<a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
<div class="banner-control banner-control-8">
<h2>
<a href="/Pages/Promotion/Sport" target="_top">Mobile Vouchers</a></h2>
<p>
Loaded on Your Mobile!</p>
<a href="/Pages/Promotion/Sport" target="_top">Read more ...</a></div>
<!--<div class="banner-control banner-control-9">
<h2>
<a href="http://ls.betradar.com/ls/livescore/?/supabets/en/page/worldcup_single" target="_top">World Cup</a></h2>
<p>
Win Big in Brazil!</p>
<a href="http://ls.betradar.com/ls/livescore/?/supabets/en/page/worldcup_single" target="_top">Read more ...</a></div>-->
</div>
<div class="carousel-controls display-inline-block">
<a class="jcarousel-next" href="#">
<img src="/Custom/Supabets/Images/btn-arrow-up.png" />
</a><a class="jcarousel-prev" href="#">
<img src="/Custom/Supabets/Images/btn-arrow-down.png" />
</a>
</div>
</div>
</div>
</div>
</div>
和jQuery:
$('.banner-carousel').jcarousel({
'wrap' : 'circular',
'animation' : 'slow'
})
$('#packagegallery').on('create.jcarousel', function(event, carousel) {
SecretSojourns.packageGalleryAnchor = $(this).children('ul').children('li').first().children('a')
}).jcarousel({
'wrap': 'circular',
'animation': 'slow'
});
$('.banner-carousel').delegate('li', 'itemvisiblein.jcarousel', function(event, carousel) {
var itemIndex = $(this).attr('id').substr(7);
$('.banner-control').hide();
$('.banner-control-' + itemIndex).show();
});
$('#packagegallery').delegate('li', 'itemvisiblein.jcarousel', function(event, carousel) {
SecretSojourns.packageGalleryAnchor = $(this).find('a');
});
$('.popular-packages-carousel').jcarousel({
'wrap' : 'circular',
'animation' : 'slow'
})
$('.jcarousel-prev').jcarouselControl({
target: '-=1'
});
$('.jcarousel-next').jcarouselControl({
target: '+=1'
});