0

事前に作成されたスライダーを使用しており、ユーザーがクリックしてそのスライダーに移動できるスライダーの下にビデオのサムネイルを配置することで、いくつかの機能を拡張しようとしています。これを達成することを望んでjQueryコードを書いています。サムネイルの下に、すでにこれを達成している箇条書きがあります。

この機能を再作成したいと思いますが、スライドごとに固有の画像サムネイルを使用します。サムネイルをクリックすると、最初の箇条書きがアクティブなクラスを取得するように設定されています。これがスライダーの変化の原因だと思いましたが、これはむしろ CSS スタイルによるものだと思います。誰かが私のコードを見て、クリックしてスライドを更新したときに video-thumbnail1 div を取得するための正しい方向に進んでいるかどうかを確認できますか? ありがとう。

HTML (navBulletsWrapper コードは画像スライダー js によって生成されます):

<div class="video-thumbnail">
    <a id="video-thumbnail1">
       <img src="/_images/VideoImages/btn_FreeConsultation.png" />
    </a>
</div>

<div class="navBulletsWrapper">
    <div class="active" rel="0"> … </div>
    <div rel="1"> … </div>
    <div rel="2"> … </div>
    <div rel="3"> … </div>
</div>

jQuery:

$(document).ready(function(){

    $('#video-thumbnail1').click(function(){
        $('div.navBulletsWrapper div').attr("rel", "0").addClass("active");
    });

});

画像スライダーのあるライブ サイトへのリンク: http://www.hazeltonlawgroup.com

ここに画像スライダーの JavaScript を投稿しますが、圧縮されています。私は Firebug があまり得意ではないので、適切に検査する方法がわかりません。助けてくれてありがとう。

4

0 に答える 0