我目前正在使用主页上的nivo滑块来显示不同的图像。它完美地运作。虽然,在图像旁边有一些文字,我想跟随每张图片。
以下是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滑块。虽然,我希望<div id="text1">
跟随每张照片。然后让<div id="#text2">
跟随下一张图片,依此类推。
用于控制nivo滑块的jQuery代码:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'sliceUp', // Specify sets like: 'fold,fade,sliceDown'
});
});
</script>
提前致谢。
答案 0 :(得分:15)
使用title
中的<img />
属性来定义要在滑块中显示为标题的文字。
让我们看一个例子:
<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 */
}
这是demo,您的滑块使用我提到的解决方法。
就这个问题而言,这就是我停下来的地方。希望它有所帮助。
答案 1 :(得分:2)
<div id="slider" class="nivoSlider">
<div class="slide slide_0">
<img class="slide-image" src='img1.png' width="100%" title="#htmlcaption_0">
</div>
<div class="slide slide_1">
<img class="slide-image" src='img2.png' width="100%" title="#htmlcaption_1">
</div>
<div class="slide slide_2">
<img class="slide-image" src='img3.png' width="100%" title="#htmlcaption_2">
</div>
</div>
<div id="htmlcaption_0" class="nivo-html-caption">
<h1 class="slide-h1">Title</h1>
<h2 class="slide-h2">Description</h2>
<h3 class="slide-h3">
<a href="#" title="">Learn More »</a>
</h3>
</div>
<div id="htmlcaption_1" class="nivo-html-caption">
<h1 class="slide-h1">Title</h1>
<h2 class="slide-h2">Description</h2>
<h3 class="slide-h3">
<a href="#" title="">Learn More »</a>
</h3>
</div>
<div id="htmlcaption_2" class="nivo-html-caption">
<h1 class="slide-h1">Title</h1>
<h2 class="slide-h2">Description</h2>
<h3 class="slide-h3">
<a href="#" title="">Learn More »</a>
</h3>
</div>
这是我的css:
.nivo-caption {
color: #FFFFFF;
min-width: 550px;
overflow: hidden;
position: absolute;
top: 180px;
z-index: 8;
}
.nivo-html-caption {
display:none;
}
希望这有帮助。
答案 2 :(得分:1)
答案 3 :(得分:0)
将您的文字放在标题中,然后您可以对课程nivo-caption
进行css更改,例如尝试给予宽度和浮动。
.nivo-caption{width:40px;float:right;}
否则你可以切换到其他滑块抱歉。
Here is link这就是你要找的东西吗?