我有一个页面,我在其中使用一些滑块来显示图片,现在我只是去检查页面的运行情况,它没有显示任何图像,而只是一个黑框显示了图片:
在这里您可以看到问题,现在我检查了代码,但找不到解决方案,我认为它与以前使用的Jquery库有关。
这是我添加Jquery JS的代码:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/menu.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.js"></script>
<script>
$(function(){
$(".slidejs-container").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: 5000,
// [number] Time spent on each slide in milliseconds.
auto: true,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
}
});
});
</script>
这是要显示图片的PHP代码:
<section id="slideshow1">
<img class="thumb9" src="images/IMG-20140312-WA0002.jpg" alt="thumbail #1" />
<div class="slidejs-container">
<div><a href="#"><img src="images/n.jpg"/></a></div>
<div><a href="#"><img src="images/ff.jpg"/></a></div>
<div><a href="#"><img src="images/kk.jpg"/></a></div>
<div><a href="#"><img src="images/hh.jpg"/></a></div>
<div><a href="#"><img src="images/gg.jpg"/></a></div>
<div><a href="#"><img src="images/jj.jpg"/></a></div>
<div><a href="#"><img src="images/ll.jpg"/></a></div>
<div><a href="#"><img src="images/mm.jpg"/></a></div>
<div><a href="#"><img src="images/nn.jpg"/></a></div>
<div><a href="#"><img src="images/ww.jpg"/></a></div>
<div><a href="#"><img src="images/xx.jpg"/></a></div>
<div><a href="#"><img src="images/yy.jpg"/></a></div>
<div><a href="#"><img src="images/zz.jpg"/></a></div>
</div>
现在,我需要将滑块设置为该大小,因此这是它的CSS:
/*...Slideshow1...*/
#slideshow1 {
width:40%;
height:10%;
float:right;
background:#000;
margin-bottom:50px;
margin-left:10px;
margin-top:0px;
}
#slideshow1 .thumb9{
width:350px;
height:190px;
float:left;
margin:0px 10px 10px 0px;
}
#slideshow1 .pagination{
margin:26px 0px;
width:100px;
color:#fffff;
display:none;
}
#slideshow1 .pagination li{
float:left;
margin:0px 5px;
list-style:none;
color:#FFFFFF;
display:none;
}
#slideshow1 img{
width:100%;
height:50%;
}
#slideshow1 .slidesjs-pagination li a{
display:none;
width:12px;
height:0px;
padding-top:12px;
background:none;
float:left;
display:none;
overflow:hidden;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#ffffff;
}
#slideshow1 slidesjs-navigation ul{
color:#ffffff;
display:none;
}
#slideshow1 slidesjs-play slidesjs-navigation slidesjs-playing{
color:#ffffff;
display:none;
}
#slideshow1 slidesjs-stop slidesjs-navigation{
color:#ffffff;
display:none;
}
#slideshow1 .slidesjs-navigation{
text-decoration: none;
display:none !important;
float:right;
color:#FFFFFF;
}
#slideshow1 ul.slidesjs-pagination{
color:#FFFFFF;
display:none;
}
最后,自开始以来,我将JS文件下载到加起来的JS文件中。
jquery.slides.js:
Which you can view from this Link
和jquery.slides.min.js:
Which you can view from this Link
附加信息:我使用了Chrome浏览器,它似乎确实在移动图片,但是我确实看到了信息“隐藏隐藏”,但是当我从Chrome浏览器开发者工具中删除该信息时,它仍然不显示任何图片。
关于如何解决此问题的任何想法?