基本的Jquery Slider(脚本问题我认为)

时间:2014-01-22 16:35:17

标签: javascript jquery html css

我使用了此网站http://www.basic-slider.com/中的滑块,并按图所示进行了安装,但我认为滑块的启动脚本与我在页面上为动画div movments安装的另一个脚本争论或冲突。< / p>

I当我加载页面时,我得到了滑块应该有数字,导航控件,间距等所有内容。但是没有图像,无论如何。我已经为图像添加了网址,它们都正确地链接在一起。所有列表元素或幻灯片都是正确的。据我所知,脚本问题或者它与页面上的位置有关,因为页面是使用相对定位和ALOT百分比值构建的。

** Slider Css **

ul.bjqs {
    position: relative;
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
    display:none;
}
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;
}  

** HTML **

<div id="slides">                       
The ul list sits in here with li img src /li. (sorry couldnt get lists to work in the editor. :(                                                        
</div>

**冲突脚本**

     <script type="text/javascript">
                        $(document).ready(function() {
                                $('#p-load').hide().delay(500).fadeIn("slow");
                        });
                        </script>  

                <!-- ꜜꜜ slider ꜜꜜ -->
                <script class="secret-source">
                jQuery(document).ready(function($) {

                      $('#slides').bjqs({
                        animtype      : 'slide',
                        automatic     : 'true',
                        height        : 320,
                        width         : 720,
                        responsive    : true,
                        randomstart   : true,
                        showmarkers   : false
                      });

                    });
                </script>

滑块脚本上方的脚本启动页面div动画。

2 个答案:

答案 0 :(得分:0)

这听起来像是一个z-index问题。你确定z-index的设置正确吗?

答案 1 :(得分:0)

当您使用响应模式时,也许您应该尝试触发窗口调整大小。我有这样的问题,这对我有用。

$(document).ready(function(){
    $(window).trigger('resize');
});