1

我正在重新创建在 StackOverflow 上找到的这张幻灯片，但使用不同的标签，因为某些名称在我的网站的其他地方使用并发生冲突。

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

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

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

任何帮助表示赞赏，我觉得我快到了。

单独的标记可以在下面看到：

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>

任何想法，方向将不胜感激！

4

1 回答 1

1

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

除了包装 css 的样式标签外，您的小提琴很好。摆脱

 <style type="text/css">

更新：它在小提琴而不是在他的网站上工作的原因是他网站上的 javascript 没有被包裹 $(document).ready()

于 2013-09-25T16:29:49.603 回答