我目前在主页上使用 nivo slider 来显示不同的图像。它工作得很好。虽然,图片旁边有一些文字,我想在每张图片后面。
这是 HTML 代码:
<!-- Splash -->
<div class="splash">
<div class="splash-content">
<div id="text1">
<h1>More traffic to your website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitectetur adipis. In ultrices malesuada est eu laoreet. Nullam eget tellus ac lacus bibendum egestas et at libero. Vestibulum commodo magna ut suscipit.</p>
</div>
</div>
<div id="slider" class="nivoSlider nivo-right theme-default">
<img src="images/splash.png" alt="" title="" />
<img src="images/splash.png" alt="" title="" />
<img src="images/splash.png" alt="" title="" />
<img src="images/splash.png" alt="" title="" />
</div>
</div><!-- End Splash -->
如您在 HTML 代码中所见,有 <div id="slider">
,这是 nivo slider 。虽然,我希望拥有 <div id="text1">
跟随每张照片。然后有一个<div id="#text2">
跟随下一张图片等等。
控制nivo slider 的jQuery代码:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'sliceUp', // Specify sets like: 'fold,fade,sliceDown'
});
});
</script>
提前致谢。
最佳答案
使用 title
<img />
中的属性定义在 slider 中显示为标题的文本。
让我们看一个例子:
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg" alt="" />
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
<!-- ^ This is one way to bring caption -->
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<!-- ^ This is ANOTHER way -->
</div>
<!-- This part of caption is called from the second image link above see `#htmlcaption` there -->
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
更新
无需修改代码,您可以覆盖默认类以显示为单独的文本框。
查找.nivo-caption
样式并对其进行一些更改
.nivo-caption {
width: 200px;
height: 250px;
left: -200px; /* same as the width */
}
更新2
这是一个demo使用您的 slider 使用我提到的解决方法。
就这个问题而言,我到此为止。希望对您有所帮助。
关于jquery - nivo slider - 向 slider 添加文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9733527/