jQuery图像滑块无法正常工作

时间:2012-12-18 14:13:32

标签: jquery image

我遇到了一个jquery img滑块的问题...我根本无法让它显示出来...任何关于我做错的想法......我将myslideshow放在内容div中...

当我查看firebug中的源代码时,例如我可以看到标记在那里,图片正确链接 - 滑块不会启动..

这是HTML标记,插件脚本和CSS

<div id="myslideshow">
                <ul class="bjqs">
                <li><img src="img/slidepic1.png" height="330" width="986" alt="slide1"/></li>
                <li><img src="img/slidepic2.png" height="330" width="986" alt="slide2"/></li>
                <li><img src="img/slidepic3.png" height="330" width="986" alt="slide3"/></li>
                <li><img src="img/slidepic4.png" height="330" width="986" alt="slide4"/></li>
                </ul>
            </div>

!-- Load jQuery og plug-in  til slider galleriet-->
<script type="text/javascript" src="js/vendor/jquery-1.8.1.js"></script>
    <script type="text/javascript" src="js/basic-jquery-slider.js"></script>

     <!--  funktionen for selve animationen mm. -->
    <script type="text/javascript">
      $(document).ready(function() {

        $('#myslideshow').bjqs({
          'width' : 970,
          'height' : 520,
      'animationDuration' : 1200,
    'showMarkers' : false,
    'centerControls' :true,
    'useCaptions' : false,
    'keyboardNav' : false,
    'showControls' : false,
        });

      });
    </script>



/* Basic jQuery Slider essential styles */

ul.bjqs{
    position:relative;
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
    display:none;
}
.bjqs-slide li{
    display:none;
    position:absolute;
}

ul.bjqs-controls li a{
  display:block;
  padding:5px 10px;
  position:absolute;
  background:#fff;
  color:#fd0100;
  text-decoration:none;
  text-transform:uppercase;
}

a.bjqs-prev{
  left:0;
}

a.bjqs-next{
  right:0;
}

 p.bjqs-caption{
  background:rgba(0,0,0,0.7);
  color:#fff;
  text-align:center;
}

 ol.bjqs-markers{
  position:absolute;
  bottom:-50px;
}

 ol.bjqs-markers li{
  float:left;
  margin:0 3px;
}

 ol.bjqs-markers li a{
  display:block;
  height:10px;
  width:10px;
  border:4px solid #fff;
  overflow:hidden;
  text-indent:-9999px;
  background:#000;
  border-radius:10px;
  box-shadow:0 0 50px rgba(0,0,0,0.5);
}

ol.bjqs-markers li.active-marker a{
  background:#fd0100;
}

1 个答案:

答案 0 :(得分:0)

Firebug无法检测到您网页上的任何JavaScript。但是我看到有关于你的jquery和脚本的引用。