我使用了此网站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动画。
答案 0 :(得分:0)
这听起来像是一个z-index问题。你确定z-index的设置正确吗?
答案 1 :(得分:0)
当您使用响应模式时,也许您应该尝试触发窗口调整大小。我有这样的问题,这对我有用。
$(document).ready(function(){
$(window).trigger('resize');
});