我正在尝试创建一个简单的网站来学习Twitter Bootstrap和SlideJS。以下代码是我到目前为止的代码。我目前有两个问题。首先是即使我将swap设置为false,它仍然会在滑块底部显示PlayStop。我的第二个问题是,无论我每次在带有类容器(twitter引导类)的div中放置什么,我都无法调整容器内任何东西的宽度,它们只占用容器的整个宽度。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.slides.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<style type="text/css">
#slides{
display: none;
}
</style>
<script type="text/javascript">
$(function(){
$("#slides").slidesjs({
width: 700,
height: 393,
navigation: {active: false, effect: "fade"},
pagination: {active: false},
play: {
active: true,
effect: "fade",
interval: 4500,
auto: true,
swap: false,
pauseOnHover: true,
restartDelay: 2500
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="slides">
<img src="imgs/alfa1.jpg" width="600" height="400"/>
<img src="imgs/alfa2.jpg" width="600" height="400"/>
<img src="imgs/alfa3.jpg" width="600" height="400"/>
<img src="imgs/alfa4.jpg" width="600" height="400"/>
<img src="imgs/alfa5.jpg" width="600" height="400"/>
<img src="imgs/alfa6.jpg" width="600" height="400"/>
</div>
</div>
</body>
</html>
以下是截图:
答案 0 :(得分:1)
交换的作用是显示播放或停止而不是播放和停止。如果要禁用该菜单,请设置play : { active: false };
通过调整子宽度,我不确定你的意思?我在jsfiddle上做了一个工作示例(将来有助于在像jsfiddle这样的沙箱中呈现你的问题)。如果你能澄清这个问题,我很乐意提供帮助。