0

我在 www.bxslider.com 的 jquery 文件的帮助下成功地在我的网站上创建了一个滑块

在 bx 滑块上清楚地写着：

幻灯片可以包含图像、视频或 HTML 内容

现在在这段代码上，我有来自 bxslider 网站的图像。但是当我向它添加一些文本时，它不再起作用了。

这是我的 HTML 文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />


<ul class="bxslider">
  <li><img src="http://bxslider.com//images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com//images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com//images/730_200/houses.jpg" /></li>
</ul>

<div class="outside">
  <h3>This div is outside of the slider</h3>
  <p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
</div>


<script>
  $('.bxslider').bxSlider({
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  nextText: 'Onward →',
  prevText: '← Go back'
});
</script>

这是小提琴：http: //jsfiddle.net/gr8_boi52/nwvW9/

有人可以帮我添加文字而不是图像吗？

4

1 回答 1

1

我已经为您的代码添加了一个小修复，它正在工作。您必须添加透明图像（因此尺寸变小）并通过添加类或直接添加样式标签使其隐藏。这是有效的，因为您使用的插件总是找到“img”标签来显示图像。

这是我为第一个“li”编辑的代码。

 <li>
  <img src="http://bxslider.com//images/730_200/hill_trees.jpg" style="display:none" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec magna ut orci porttitor ..... </p>
 </li>

这是更新的 jsfiddle 链接：

http://jsfiddle.net/nwvW9/11/

于 2013-06-06T10:34:06.043 回答