0

我是网站设计的初学者，我正在尝试为我的公司创建一个更现代的网站。当前的一个不那么迷人（Greenlite.co.uk）。

在花了很多时间尝试为主页制作 Flash 横幅后，我突然想到 Flash 可能已经过时并且无法从所有平台上查看。这是我遇到 BxSlider 的时候，它看起来真的很棒！如果我能让它在我的网站上工作就好了。

我使用的是 CoffeeCup Visual Site Designer，然后我使用了“添加 HTML”工具。进入“插入 HTML”窗口，我放置如下；

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


<ul class="bxslider">
  <li><img src="images/timeline1.jpg" title="An Energy Conservation Company"></li>
 <li><img src="images/image1.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li>
<li><img src="images/back12.jpg" title="Caption to go here"></li>

</ul>

<script type="text/javascript">$(document).ready(function(){
$('.bxslider').bxSlider();
});
mode: fade,
captions: true,
auto: true,
autoControls: false
});
});
</script>

我已尽我所能遵循 bxslider.com 上显示的说明。我从 bxslider 下载了包，将文件添加到 coffeecup 并链接脚本中的位置。我还将我的图像添加到 CoffeeCup 并写在它们的位置。

当我预览我的网站时，我的三张图片同时显示，每一张都在另一张下方，并带有一个鼠标悬停在标题上。图像旁边是一个要点。

我想要实现的是一个带有自动启动、显示停止/启动控件和标题的 Bxslider。

我尝试了很多变化，我展示的脚本是我最初的尝试。

我最接近工作 Bxslider 的方法是复制我从网站上找到的旧版本 bxslider 的代码。这给了我一个带有标题的图像幻灯片。如果我试图根据我的规范编辑代码，那么它会让我回到原点。

我完全意识到我可能会犯一个非常明显的错误。然而，对于未经训练的人来说，它只会让我头疼。任何帮助将不胜感激。

4

3 回答 3

1

您拥有的 Javascript 无效。尝试将 Javascript 更改为：

<script type="text/javascript">
  $(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: true,
        auto: true,
        autoControls: false
    });
  });
</script>

请参阅工作 jsfiddle - http://jsfiddle.net/FLuRH/

于 2013-01-11T09:56:10.140 回答
0

我注意到一些可能是问题的事情：
您没有正确关闭某些代码部分
这是您的：

    <script type="text/javascript">
      $(document).ready(function(){
        $('.bxslider').bxSlider({
            mode: 'fade',
            captions: true,
            auto: true,
            autoControls: false
        });
      }); 
</script>


这是我的：

<script type="text/javascript">
  $(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: 'true',
        auto: 'true',
        autoControls: 'false',
    });
  });
</script>


我也将此代码部分放在“head”部分中并且它有效。试试看。我希望我能以某种方式帮助。

于 2013-09-26T11:48:47.307 回答
0

这是工作代码（只需在您提取 bxslider 文件夹的位置创建新的 html 文件）

    <!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="jquery.bxslider.min.js"></script>
    <link href="jquery.bxslider.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".bxslider").bxSlider();
        });
    </script>
</head>

<body>
    <div style="width:700px;height:250px;align:center;padding-left:250px;">
        <ul class="bxslider">
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
        </ul>
    </div>
</body>
</html>
于 2015-02-13T12:09:28.850 回答