0

このページからファイルとコードをコピーしましたBasic-slider.com

しかし、プレビューすると、画像が壊れて体の下に表示されます。より高いz-indexを与えて、それを一番上に配置したので、なぜかわかりません。また、画像がテーブル/リストに表示されるように変更すると表示されますが、スライダーがありません。これは私がこれまでにそれをコーディングした方法です：

頭：

<title>Tech and Innovation</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="bjqs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="bjqs.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#banner-fade').bjqs({
        'height' : 320,
        'width' : 620,
        'responsive' : true
    });
});
</script>

</head>

本文のHTML：

<body>
<div id="wrapper">
<div id="header">
    </div>
    <div align="center">
<div id="body" style="width: 960px; left: 0px; top: 0px">

<div id="my-slideshow" style="height: 500px; z-index: 3;">
    <ul class="bjqs">
        <li><img alt="" height="310" src="img/banner01.jpg" width="620" /></li>
    <li><img alt="" height="310" src="img/banner03.jpg" width="620" /></li>
    </ul>
    </div>
</div>
</div>

<div id="footer" style="height: 178px">

</div>

</div>


</body>

CSS：

ul.bjqs{
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    display: block;
    z-index: 2;
}

li.bjqs-slide{
    position:absolute;
    display:none;
}

ul.bjqs-controls{
    list-style:none;
    margin:0;
    padding:0;
    z-index:9999;
}

ul.bjqs-controls.v-centered li a{position:absolute;}

ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}

ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}

ol.bjqs-markers.h-centered {text-align: center;}
ol.bjqs-markers li {display:inline;}

ol.bjqs-markers li a {display:inline-block;}

p.bjqs-caption {
    display:block;
    width:96%;
    margin:0;
    padding:2%;
    position:absolute;
    bottom:0;
}

何が間違っているのかはわかりませんが、独学で物事を見つけるのは難しいので、簡単なことだと思います。

4

2 に答える 2

0

代わりに以下を使用してください。

$(function() {
     $('#my-slideshow').bjqs({
        'height' : 320,
        'width' : 620,
        'responsive' : true
    });
});
于 2012-12-20T10:20:39.237 に答える
0

あなたのjqueryのバージョンは

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

そしてcssパスは正しいです

于 2012-12-20T10:41:50.957 に答える