javascript - 从 JSFiddle 重新创建一个简单的旋转木马 slider

Question

我正在重新制作这张在 StackOverflow 上找到的幻灯片，但使用了不同的标签，因为一些名称在我的网站的其他地方使用并且存在冲突。

原始的 JS Fiddle 可以在这里找到: http://jsfiddle.net/KSHSX/6/

我试图更改以适应我的站点的 JS Fiddle 可以在这里找到: http://jsfiddle.net/owenoneill/KzmTM/1/

我希望它像第一个一样工作，但具有不同的 div 名称，并通过使用标签代替，基本上完全相同但具有不同的 ids/classes - 我通常可以自定义基本的 javascript/css 属性，但这次有点麻烦。

感谢任何帮助，我觉得我快到了。

单独的 MarkUp 如下所示:

JavaScript:

    <script type="text/javascript">
        var sliderWidth = 300;
        var slider = $('#slidie');
        var sliderCount = $('div', slider).length;
        slider.width(sliderCount * sliderWidth);

        $('a.date-nav-prev').click(function () { 
            $('#slidie').animate({left: '+='+sliderWidth}, 500);
        });

        $('a.date-nav-next').click(function () {
            $('#slidie').animate({left: '-='+sliderWidth}, 500);
        });
    </script>

HTML:

<a class="date-nav-prev">< Prev</a>
<a class="date-nav-next">Next ></a>
<div id="wrapper">
    <div id="slidie">
        <div id="daysAgo2">Actions from 2 Days Ago</div>
        <div id="yesterday">Yesterday's Actions</div>
        <div id="today">Today's Actions</div>
    </div>
</div>

CSS:

    <style type="text/css">
        #wrapper{
        width:300px; 
        height:300px; 
        border:1px solid #333;
        position:relative; 
        overflow:hidden;
        }
        #slidie {
            width: 1000px !important;
            height: 100% !important;
            position: absolute;
        }
        #slidie div {
            width:300px; 
            height:100%; 
            float:left; 
        }
        #today{background:green;}
        #yesterday {background:yellow;}
        #daysAgo2 {background:orange;}
    </style>

如有任何想法和指示，我们将不胜感激!

Answer 1

http://jsfiddle.net/bhlaird/KzmTM/2/

除了包装 css 的样式标签外，您的 fiddle 很好。摆脱掉

 <style type="text/css">

更新:它在 fiddle 中工作而不是在他的网站上工作的原因是他网站上的 javascript 没有包装在 $(document).ready()

中