Question

我刚刚了解了bxslider并通过阅读文档制作了我的第一张幻灯片。但我无法看到图片上的左右箭头，以便点击显示下一张图片，如下例所示：This Link

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>New seven Wonders of the world</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<ul class="bxslider">
  <li><img src="pic2.jpg" title="Great Wall of China, China"/></li>
  <li><img src="pic3.jpg" title="Petra, Jordan" /></li>
  <li><img src="pic4.jpg" title="Colosseum, Rome, Italy" /></li>
  <li><img src="pic5.jpg" title="Chichen Itza, Mexico" /></li>
  <li><img src="pic6.jpg" title="Machu Pichu, Peru" /></li>
  <li><img src="pic7.jpg" title="Taj Mahal, India" /></li>
  <li><img src="pic8.jpg" title="Christ the redeemer, Brazil" /></li>
  <li><img src="pic1.jpg" title="Giza Necropolis, Egypt (Honorary title only)" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({slideWidth: 700,auto: true,
  mode: 'fade', captions: true, speed: 700});
});
</script>
</body>
</html>

为什么我看不到那些点击时会给出下一张或上一张幻灯片的2个箭头？我真的找不到我可能写的任何不同或我可能忘记的任何东西。

Answer 1

虽然您提供了代码，但要猜测为什么不显示箭头并不容易。一个简单的原因可能是箭头的图像丢失/错位，所以只需检查图像controls.png是否在正确的位置。 bxslider使用this image来显示箭头 - http://bxslider.com/lib/jquery.bxslider.css第106行：

.bx-wrapper .bx-prev {
background: url("images/controls.png") no-repeat scroll 0 -32px rgba(0, 0, 0, 0);
}

如果您不想调整CSS，可以在bxslider.css所在的文件夹中添加目录images，并将此图像复制到此文件夹。

要检查控件是否已经位于滑块上且只缺少图像，您可以使用web开发工具查看以下div是否在<div class="slider">

中

<div class="bx-controls-direction">
  <a href="" class="bx-prev">Prev</a>
  <a href="" class="bx-next">Next</a>
</div>

Answer 2

我遇到了同样的问题，通过将controls.png放在与jquery.bxslider.css粘在一起的lib文件夹中修复。

使用bxslider时图像上没有箭头

2 个答案: