1

方向矢印で左から右に移動するカルーセル内の背景画像のみで構成される単純な Web サイトを作成しようとしています。簡単な例を提供するリソースを 1 つ見つけましたが、そのモデルを再現しようとすると、スクリプト自体が定義されていないようです。また、デモは 700x500 しかないため、実際にフルスクリーンにすることには 2 つ目の問題があります。

リソースへのリンクは次のとおりです: Dynamic Drive。

また、ここに私のHTMLがあります

<!DOCTYPE html>

<head>

<title>Hit Heavy</title>

<link rel="shortcut icon" href="favicon.ico" type="image/ico" />

<style type="text/css">
    div.bgcarousel { /* CSS for main carousel container */
        background: black center center no-repeat; 
        width: 100%;
    }

    img.navbutton { /* CSS for the nav buttons */
        margin: 5px;
        opacity: 0.7;
    }

    div.slide{ /* CSS for each image's DIV container within main container */
        background-color: black;
        background-position: center center; /* center image within carousel */
        background-repeat: no-repeat;
        background-size: cover; /* CSS3 property to scale image within container? "cover" or     "contain" */
        color: black;
    }
</style>

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bgcarousel.js" script type="text/javascript"></script>
<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
    wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
    imagearray: [
        ['bg.jpg'], //["image_path", "optional description"]
        ['bg.jpg'],
        ['bg.jpg'],
        ['bg.jpg'] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false,  pauseonmouseover:true},
    navbuttons: ['left.png', 'right.png'], // path to nav images
    activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
    orientation: 'h', //Valid values: "h" or "v"
    persist: true, //remember last viewed slide and recall within same session?
    slideduration: 500 //transition duration (milliseconds)
})

</script>

</head>

<body>
    <div id="mybgcarousel" class="bgcarousel"></div>
</body>
</html>

html 内のスクリプトをサポートする javascript については、ここで表示できます。

4

3 に答える 3

0

問題は、幅を100％に設定した次の行にあります

   div.bgcarousel{ /* CSS for main carousel container */
   background: black ; 
    width:700px; /* default dimensions of carousel */
    height:500px;
    }
于 2013-03-01T04:41:46.210 に答える
0

そのコードの周りに $(document).ready() ハンドラーを追加する必要があると思います。jquery と bgcarousel がロードされる前に実行されていると思います。スクリプトを次のように変更します。

<script type="text/javascript">
$(document).ready(function(){
  var firstbgcarousel=new bgCarousel({
    wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
    imagearray: [
        ['bg.jpg'], //["image_path", "optional description"]
        ['bg.jpg'],
        ['bg.jpg'],
        ['bg.jpg'] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false,  pauseonmouseover:true},
    navbuttons: ['left.png', 'right.png'], // path to nav images
    activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
    orientation: 'h', //Valid values: "h" or "v"
    persist: true, //remember last viewed slide and recall within same session?
    slideduration: 500 //transition duration (milliseconds)
  })
})
</script>

$(document).ready 部分は、スクリプトを実行する前に、ドキュメントが読み込まれるまでコードを待機させます。

于 2013-03-01T14:02:03.167 に答える
0

@ user2122160高さは重要ですこのようにcssを変更してください

div.bgcarousel { /* CSS for main carousel container */
        background: black center center no-repeat; 
        width: 100%;
        height:100%;
    }

以下のエラーリンクなしで、あなたのコードに基づいてスライダーを作成しました。

http://www.fileconvoy.com/dfl.php?id=g7d74fb2c3b904c6a99923428881a8f81443981afd

于 2013-03-01T13:52:03.457 に答える