jquery插件代码滑块答案

【问题标题】：jquery plugin codasliderjquery插件代码滑块
【发布时间】：2012-02-29 05:12:18
【问题描述】：

我正在尝试使用 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(function() 中缺少document。此外，您通常应该将代码放在样式之后。
我添加了文档并将代码放在样式之后，但仍然无法正常工作。
你有 Firebug 或合适的 DOM 检查器吗？你能检查脚本的路径是否正常工作吗？
是的，我用萤火虫检查过它正在工作
另外，还有一个 CSS 文件需要添加 - demo-menu.css。您能否对上面的代码进行更改，以便其他人也可以更轻松地进行调试？

标签： javascript jquery jquery-plugins coda-slider

【解决方案1】：

好吧，过去一个小时左右，我一定一直在搞砸这个问题，想知道为什么它不起作用，因为喜欢你，因为它看起来应该没问题。

我想我找到了解决方案。似乎 codaSlider 对您给滑块对象的名称很挑剔 - 它们必须包含破折号并且必须按顺序排列。

您的滑块名为“#codaslider5”，您需要将其更改为“#coda-slider-1”（如果您使用 2、3...n 它不起作用 - 大概它希望您实际拥有滑块 1、2、3、4（如果您想使用 ID 5）。

我们开始吧：

变化：

$('#codaslider5').codaSlider({

到

$('#coda-slider-1').codaSlider({

接下来，改变：

<div id="nav">

到

<div id="coda-nav-1">

接下来，改变：

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

到

<div class="coda-slider" id="coda-slider-1">

或者为了懒惰here is the fixed file，和diff。

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

【讨论】：