1

URL は次のとおりです: http://174.120.239.48/~peakperf/

jQuery は次のとおりです。

http://pastebin.com/fB16ahcZ

サイトはまだ大規模な開発中です。

カルーセルの「サービス保持」にマウスを合わせると、機能がどのように機能するかが表示されます。ホバーするとスパン要素がフェードインし、マウスアウトすると非表示になります。立ち往生しているものもあれば、正常に機能するものもあります。また、右矢印をクリックしてカルーセルをスクロールすると、スパンが「オン」のままになることにも注意してください。

どんな助けでも大歓迎です、ありがとう！

4

2 に答える 2

1

同じ ID を持つタグが複数あるようですが、これは許可されていません。IDは"homeslide6-show". また、開始する前にアニメーションを停止してみて、JavaScript を次のように単純化する必要があります。

jQuery(document).ready(function() {

    // hides the slickbox as soon as the DOM is ready
    jQuery('#homeslide1, #homeslide2, #homeslide3, #homeslide4, #homeslide5, #homeslide6').hide();

    // shows the slickbox on clicking the noted link  
    for (var i = 1; i <= 6; i++) {
        jQuery('#homeslide' + i + '-show').parent().hover(
            function(e, i) {
                jQuery('#homeslide' + i).stop(true, true).fadeIn('slow');
                e.preventDefault();
                return false;
            },
            function(e, i){
                jQuery('#homeslide' + i).stop(true, true).fadeOut('slow');
                e.preventDefault();
                return false;
            }
        );
    }
});

これがうまくいくかどうか教えてください。

編集済み

上記の私の JavaScript は正しくありません。以下の作品：

jQuery(document).ready(function() {

    // hides the slickbox as soon as the DOM is ready
    jQuery('#homeslide1, #homeslide2, #homeslide3, #homeslide4, #homeslide5, #homeslide6').hide();

    // shows the slickbox on clicking the noted link  
    for (var i = 1; i <= 6; i++) {
        jQuery('#homeslide' + i + '-show').parent().data({element: '#homeslide' + i}).hover(
            function() {
                var element = jQuery('element');
                jQuery(element).stop(true, true).fadeIn('slow');
                return false;
            },
            function(){
                var element = jQuery('element');
                jQuery(element).stop(true, true).fadeOut('slow');
                return false;
            }
        );
    }
});
于 2011-02-24T00:11:23.280 に答える
1

終了タグ「a」がないため、マークアップは無効です (下記参照)

</a>

コードのエラーは次のとおりです。

           <a href="#" id="homeslide6-show">
               <img src="http://174.120.239.48/~peakperf/wp-content/themes/strausberg/images/home_service_retention.jpg" width="200" height="92" />
          </li>
      </ul>

さらに、each() 関数を使用すると、jquery コードを約 90% 削減できます。

たとえば、ulにIDを追加して、そのようにします

<ul id="mycarousel">

    jQuery('#mycarousel').find('span').each(function(){

        jQuery(this).hover(function() {

            jQuery(this).next().fadeIn('slow');

            return false;

        }, function(){

            jQuery(this).next().fadeOut('slow');

            return false;
        });
    });

Ps、このコードは現在の html 構造に固定されています。より柔軟にするためにクラスを使用する必要があります。

于 2011-02-24T00:03:42.273 に答える