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 回答