0

我一直在这2天了。我正在尝试使用这个jQuery 插件设置一个简单的内容滑块。我想到的滑块只有 2 个面板(幻灯片),两者都应该有固定的高度和宽度。

我根据它的文档尝试过,一无所获。我下载了源代码并剖析了索引页面,删除了除滑块之外的所有其他 HTML,并处理了该结构以及所需的文件,但仍然无济于事,我现在完全感到沮丧。

下面是我现在的代码。

HTML

<html>
<head>
<title>Untitled Document</title>
<!--stylesheets-->
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/coda-slider.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/myStyles.css" />

<!--scripts-->
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery.coda-slider-3.0.js"></script>

<script type="text/javascript">
$(function() {
    $('#main-slider').codaSlider({
      autoHeight: false,
      continuous:false,
      dynamicArrows: false,
      dynamicTabs: false
    });
    $('#showcase').codaSlider();
});

</script>
</head>
<body>

<div class="coda-slider"  id="main-slider"><!-- Main Slider -->
    <div>

          <div class="coda-slider"  id="showcase"><!-- Showcase Slider -->

                <div id="first"><!-- first panel -->
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
                </div><!-- end of first panel -->

                <div id="second"><!-- second panel -->
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
                </div><!-- end of second panel -->

          </div> <!-- End Showcase Slider -->

    </div>
</div><!-- End Main Slider -->

</body>
</html>

CSS

body {
    background-color:#FC9;  
}

#main-slider {
    width:1000px;
    height:600px;
    background-color:#FFF;
    margin:80px auto;
}

]
#showcase {
    width:1000px;
    height:600px;
}

#first {
    width:1000px;
    height:600px;
    background-color:#CF6;
}

#second {
    width:1000px;
    height:600px;
    background-color:#F36;
}

也许我只是忽略了一些东西。根据文档,它应该很容易。有人可以告诉我我在这里缺少什么吗?或者更好的是,如果不是太麻烦的话,可以举一个例子?我真的很感激!

谢谢你。

4

1 回答 1

3

我从未尝试过该插件,但您是否尝试过简单地更改

$(function() {
    $('#main-slider').codaSlider({
      autoHeight: false,
      continuous:false,
      dynamicArrows: false,
      dynamicTabs: false
    });
    $('#showcase').codaSlider();
});

进入

$(function() {
    $('#main-slider').codaSlider({
      autoHeight: false,
      continuous:false,
      dynamicArrows: false,
      dynamicTabs: false
    });
});

目前,您似乎正在尝试在滑块内创建一个滑块,但我从您的问题中感觉到这不是您的预期行为。

加法:忘了提也要改变这个:

<div class="coda-slider"  id="main-slider"><!-- Main Slider -->
    <div>

          <div class="coda-slider"  id="showcase"><!-- Showcase Slider -->

                <div id="first"><!-- first panel -->
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
                </div><!-- end of first panel -->

                <div id="second"><!-- second panel -->
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
                </div><!-- end of second panel -->

          </div> <!-- End Showcase Slider -->

    </div>
</div>

进入

<div class="coda-slider"  id="main-slider"><!-- Main Slider -->
      <div id="first"><!-- first panel -->
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
      </div><!-- end of first panel -->

      <div id="second"><!-- second panel -->
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
      </div><!-- end of second panel -->

</div>
于 2013-02-07T17:14:42.117 回答