Javascript jquery插件codaslider_Javascript_Jquery_Jquery Plugins_Coda Slider

Javascript jquery插件codaslider

javascript jquery jquery-plugins

Javascript jquery插件codaslider,javascript,jquery,jquery-plugins,coda-slider,Javascript,Jquery,Jquery Plugins,Coda Slider,我正在尝试使用codaslider插件，但它不适合我。我认为我做的每件事都是对的，但仍然不起作用。有人能帮我找出我犯了什么错误吗。下面是我的代码。问题是它不能从一个面板滑到另一个面板。我已经阅读了文档，但我不知道我在这里犯了什么错误 <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

我正在尝试使用codaslider插件，但它不适合我。我认为我做的每件事都是对的，但仍然不起作用。有人能帮我找出我犯了什么错误吗。下面是我的代码。问题是它不能从一个面板滑到另一个面板。我已经阅读了文档，但我不知道我在这里犯了什么错误

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="plugins/jquery.coda-slider-2.0.js"></script>
    <script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
    $().ready(function() {
       $('#codaslider5').codaSlider({
           dynamicArrows: false,
           dynamicTabs: false
       });
    });
    </script>
    <style>
        #nav { width: 500px; background: blue; height: 50px; }
        ul { list-style: none; margin: 0; }
        #mainWrapper #nav ul li { float: left; margin-right: 40px; }
        #slider { width: 500px; background: red; overflow: hidden; }
        .codaslider { width: 1500px; background: greenyellow; }
        .panel { width: 500px; height: 100px; float: left; }
        .panel1 { background: green; }
        .panel2 { background: lightblue; }
        .panel3 { background: yellow; }
    </style>
    <title>title</title>
</head>
<body>
    <div id="mainWrapper">
        <div id="nav">
            <ul>
                <li class="tab1"><a href="#1">Panel 1</a></li>
                <li class="tab2"><a href="#2">Panel 2</a></li>
                <li class="tab3"><a href="#3">Panel 3</a></li>
            </ul>
        </div>
        <div id="slider">
            <div class="codaslider" id="codaslider5">
                <div class="panel panel1">
                    <h2>Panel 1</h2>
                    <p>This is panel 1</p>
                </div>
                <div class="panel panel2">
                    <h2>Panel 2</h2>
                    <p>This is panel 2</p>
                </div>
                <div class="panel panel3">
                    <h2>Panel 3</h2>
                    <p>This is panel 3</p>
                </div>
            </div>
        </div>
    </div>
</body>


$（）.ready（函数（））{
$（'#codaslider5'）。codaSlider({
卡罗斯：错，
dynamicTabs:false
});
});
#导航{宽度：500px；背景：蓝色；高度：50px；}
ul{列表样式：无；边距：0；}
#mainWrapper#nav ul li{浮点：左；边距右：40px；}
#滑块{宽度：500px；背景：红色；溢出：隐藏；}
.codaslider{宽度：1500px；背景：绿黄色；}
.面板{宽度：500px；高度：100px；浮动：左；}
.panel1{背景：绿色；}
.panel2{背景：浅蓝色；}
.panel3{背景：黄色；}
标题





小组1
这是第一小组
小组2
这是第二小组
小组3
这是第三小组

好吧，我一定是在过去的一个多小时里一直在胡思乱想，想知道为什么它不起作用，因为它和你一样，因为它看起来应该是好的

我想我找到了解决办法。似乎codaSlider对您为滑块对象指定的名称很挑剔——它们必须包含破折号，并且必须按顺序排列

您的滑块名为“#codaslider5”，您需要将其更改为“#coda-slider-1”（如果您使用2,3…n，则不起作用-如果您想使用ID为5，可能它希望您实际使用滑块1,2,3,4）

我们开始：

更改：

$('#codaslider5').codaSlider({

到

接下来，改变：

<div id="nav">

<div class="codaslider" id="codaslider5">

到

接下来，改变：

<div id="nav">

<div class="codaslider" id="codaslider5">

到

或者是懒散，还有

这会弄乱你的CSS，所以你必须修复它。但希望这能让您回到正轨。

您在

$（）中缺少文档
。您通常应该将代码放在样式之后。我添加了文档并将代码放在样式之后，但仍然不起作用。您是否有Firebug或合适的DOM检查器？您能否检查脚本的路径是否正常工作？是的，我用Firebug检查了它是否正常工作。另外，还有一个CSS文件需要添加- demo menu.css。您能否对上面的代码进行更改，以使其他人也更容易调试？
<div class="coda-slider" id="coda-slider-1">