2

jsfiddle で単純な画像スライダーを変更しましたが、最初のクライアント Web サイトで動作しない理由がわかりません。jsFiddle では問題なく動作しますが、サイトでは動作しません。

スムーズなスクロールのために他のいくつかのプラグインを使用します（これを=/に転送しようとして壊れたと思います）。これは、開発ポートフォリオを軌道に乗せるために引き受けた最初の「クライアント」の 1 つです。

jsFiddle コードへのリンクは次のとおりです - http://jsfiddle.net/SbDpR/

JS スニペット

$(document).ready(function() {

    var height = 340,
        width = 740,
        slides = 5,
        contentNum = 1;
    $('.testing').html("Content Number - " + contentNum);
    $('.main_inner').css({
    width: slides * width
    });
    $('.next a').click(function(){
        if (contentNum < slides) {  
           $('.main_inner').animate({
            marginLeft: '-' + (width * contentNum)
            }, 600);
            contentNum = contentNum + 1;
            $('.testing').html("Content Number - " + contentNum);
        } else {
           $('.main_inner').animate({
            marginLeft: '0'
            }, 600);
            contentNum = contentNum / contentNum;
             $('.testing').html("Content Number - " + contentNum);
        }
        return false;
    });

    $('.previous a').click(function(){
        if (contentNum > 1) {
           $('.main_inner').animate({
            marginLeft: '+=740'
            }, 600);
            contentNum = contentNum - 1;
            $('.testing').html("Content Number - " + contentNum);
        } else {
            $('.main_inner').animate({
            marginLeft: '-2960'
            }, 600);
            contentNum = 5;
            $('.testing').html("Content Number - " + contentNum);
        }
        return false;
    });
});​

実際の動作を確認できるサイトへのリンクは次のとおりです - http://skeptikalmedia.com/MOM/index.html

私はこの 4 時間をライブ サイトで動作させるために費やしました。コピー/貼り付け/削除/コピー/貼り付けしました。現在、スクリプトはインデックス ページに置かれており、ファイルのインポートなどを見逃していないことを確認しています。

何か案は？私は、誰かがなぜそれが機能しないのかを教えてくれたり、JSFiddle を jQuery プラグインに変えたりするのにほとんどお金を払うところまで来ています。

4

2 に答える 2

1

あなたのクラス.wrapper divはposition: absolute;. これを削除すると、すべてが想定どおりに表示されるか、既存の css を次のように変更します (position: staticは html 要素のデフォルトの配置です)。

.main_inner > div {
    position: static;
}
于 2012-10-20T05:13:17.757 に答える
0

このコードを変更

<div id="content1" class="content">

に

<div id="content1" class="content" style="position: relative;">

他の content2 、 content3 ....についても同じです。

于 2012-10-20T05:24:09.470 に答える