jQuery图片滑块不显示任何图片

由 发布于 phpcssjavascriptjqueryhtml
 收藏

我有一个页面，我在其中使用一些滑块来显示图片，现在我只是去检查页面的运行情况，它没有显示任何图像，而只是一个黑框显示了图片：

As you see the 2 out of 4 Sliders showing a black box

在这里您可以看到问题，现在我检查了代码，但找不到解决方案，我认为它与以前使用的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浏览器开发者工具中删除该信息时，它仍然不显示任何图片。

关于如何解决此问题的任何想法？

评论