0

私はjQueryが初めてで、Wordpressで2つのことを行うインタラクティブなスライダーを作成しようとしています:

1)ホバーすると、メインの写真ボックスに新しいdivが表示されます

2) リンクをクリックすると、そのページに移動します

ただし、エラー コンソールは、スクリプトの後半で next が定義されていないことを示しています。

これは私がこれまでに持っているものです:

    function slideShow() {
            var current = jQuery('#featArea.show');
        var next = jQuery('#defaultImg');

        $('div#featLinkWorkshop a').hover (
            function() {
                next = jQuery('div#featWorkshops');
            }

//repeat the above for each section

    current.removeClass('show');
        next.fadeIn().addClass('show');

        setTimeout(slideShow, 3000);
    }

HTML 

<div id="defaultImg" class="featImg show">
    <img src="#" />
</div>

<div id="featWorkshops" class="featImg">
    <img src="#" />
<div class="featImgCaption">

    <h1>Caption Title</h1>
    <p>Sentence of interest.</p>
    </div>
</div>

その後、HTML で 

<div class="featLink" id="featLinkWorkshop">
    <img src="#" />

    <a href="#">Workshops</a>
</div>

これを表示できるページは次のとおりです: http://www.toppling-dominoes.com/sevenoaks . どうもありがとう！

更新: wahtever のアイデアとこのチュートリアルの助けを借りて、スライダーがほぼ機能するようになりました。サイクル プラグインには、当初考えていたよりも多くの機能があります。

4

1 に答える 1

0

jquery サイクル プラグインを試してください: http://jquery.malsup.com/cycle/

1- ここにアクセスして、サムネイルを生成する方法を確認できます: http://jquery.malsup.com/cycle/pager2.html

2- キャプションの生成方法については、こちらをご覧ください: http://jquery.malsup.com/cycle/caption.html

これら 2 つを組み合わせると、sildeshow 部分が処理され、残りは CSS スタイルの問題になります。

于 2012-02-07T23:41:55.830 に答える