0

StackOverflowのいくつかの投稿を利用してdivスライダーを作成していますが、何らかの理由で機能していません。Jqueryにエラーがあることを示していますが、表示されません。2つ目の目が必要です

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Previous Next</title>
 <style type="text/css">
 .table-container {
    width:456px; /* Total width of visible columns + border widths */
    height:300px;
    border:solid 1px #000;
    background-color:#eee;
    overflow:hidden;
}

.sliding-window {
    width:760px; /* Total width of all columns in sliding-window + border widths */
    height:300px;
    overflow:hidden;
}

.sliding-window div {
    float:left;
    width:150px;
    height:300px;
    background-color:#aaa;
    border:solid 1px #999;
}
​
 </style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('#next-column').click(function(event) {
        event.preventDefault();
        $('.table-container').animate({scrollLeft:'+=152'}, 'slow');        
    });

    $('#previous-column').click(function(event) {
        event.preventDefault();
        $('.table-container').animate({scrollLeft:'-=152'}, 'slow');        
    });

});​
</script>

</head>

<body>

<a id="previous-column" href="#">Previous</a>
<a id="next-column" href="#">Next</a>
<div class="table-container">
    <div class="sliding-window">
        <div id="col-1">
            <p>This is the content of the first column in the sliding table</p>
        </div>
        <div id="col-2">
            <p>This is the content of the second column in the sliding table</p>
        </div>
        <div id="col-3">
            <p>This is the content of the third column in the sliding table</p>
        </div>
        <div id="col-4">
            <p>This is the content of the fourth column in the sliding table</p>
        </div>
        <div id="col-5">
            <p>This is the content of the fifth column in the sliding table</p>
        </div>
    </div>
</div>
​
</body>

</html>
4

1 に答える 1

0

これを機能させるために試すことができることがいくつかあります。

スクリプトがページに取り込まれていることを確認してください。確認する1つの方法は、Chromeデバッガーの[ソース]タブを使用し、HTMLヘッドセクションで他のファイルを検索することです。

jQueryをインクルードした後、データテールスクリプトをインクルードしていることを確認してください。これは、jQueryに依存していることが最も確実です。

jQueryが適切に1回だけ含まれているかどうかを確認します。

jQueryの競合に注意してください。$をオーバーライドしている他のライブラリがいくつかあるため、$はjQueryのエイリアスではなくなったため、コードは機能していません。jQuery.noConflict（）を使用して、同じ変数$を使用するページ上の他のライブラリとの競合を回避できます。

于 2012-12-22T13:59:40.217 に答える