【发布时间】：2020-05-09 12:34:37
【问题描述】：
我有一个页面，我使用一些滑块来显示图片，现在我只是进去检查页面的运行情况，它没有显示任何图片，只是一个应该显示图片的黑框：
在这里您可以看到问题，现在我检查了代码，但找不到解决方案，我认为它与以前工作的 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 文件。
jquery.slides.js：
你可以从这个Link查看
和 jquery.slides.min.js：
你可以从这个Link查看
附加信息：我使用了 Chrome 浏览器，它看起来好像在移动图片，但我确实看到了说溢出隐藏的信息，但是当我从 Chrome 浏览器开发者工具中删除它时仍然没有显示任何内容图片。
关于如何解决这个问题的任何想法？
【问题讨论】：
标签： javascript php html jquery css