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 に追加し、その場所に書き込みました。

Web サイトをプレビューすると、3 つの画像がすべて一度に表示され、それぞれの下にマウス オーバー キャプションが表示されます。画像の横には箇条書きがあります。

私が達成しようとしているのは、自動開始、停止/開始コントロールの表示、およびキャプション付きの Bxslider です。

私は多くのバリエーションを試みましたが、私が示したスクリプトは私の最初の試みです。

動作する Bxslider に最も近いのは、古いバージョンの bxslider の Web サイトから見つけたコードをコピーすることです。これにより、ヘッダー付きの画像スライドショーが表示されました。自分の仕様に合わせてコードを編集しようとすると、振り出しに戻ることになります。

私は非常に明白な間違いを犯している可能性が高いことを完全に認識しています. しかし、訓練されていない目には、頭痛の種しかありません。どんな助けでも大歓迎です。

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

ここに作業コードがあります（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 に答える
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>


また、このコード部分を「ヘッド」セクションに配置すると、機能しました。試してみる。何とかお役に立てば幸いです。

于 2013-09-26T11:48:47.307 に答える