2012-12-20 85 views
0

加载我从这个网页Basic-slider.com图像不会在滑块

复制的文件和代码但是,当我预览图像出现破裂和身体下面。我不知道为什么,因为我已经给它一个更高的Z指数,并安排它在顶部。另外,当我改变它,所以图像在表/列表中显示出来,但我没有滑块。 这是我到目前为止已经编码它:

头:

<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; 
} 

我不知道是什么我是否做错了,但我确定这很简单,因为我是自学成才的,现在找到困难的方式。

回答

0

改为使用以下内容。

$(function() { 
    $('#my-slideshow').bjqs({ 
     'height' : 320, 
     'width' : 620, 
     'responsive' : true 
    }); 
}); 
+0

我已经把这些代码中,但我的图片似乎仍然被打破/隐藏。我真的不知道为什么,因为没有什么建议他们应该。 –

+0

转到控制台,看看是否有任何错误。 – Doink

0

你的jQuery的版本是

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

和css路径是正确的