SlideJS的宽度和交换无法正常工作

时间:2014-03-30 04:38:08

标签: javascript jquery html css twitter-bootstrap

我正在尝试创建一个简单的网站来学习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>

以下是截图:

enter image description here

1 个答案:

答案 0 :(得分:1)

  1. 交换的作用是显示播放或停止而不是播放和停止。如果要禁用该菜单,请设置play : { active: false };

  2. 通过调整子宽度,我不确定你的意思?我在jsfiddle上做了一个工作示例(将来有助于在像jsfiddle这样的沙箱中呈现你的问题)。如果你能澄清这个问题,我很乐意提供帮助。

  3. 示例:http://jsfiddle.net/mAWLM/