Question

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

最初的JS小提琴可以在这里找到： http://jsfiddle.net/KSHSX/6/

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

我希望它可以作为第一个但具有不同的div名称，并且通过使用标签，基本上完全相同但使用不同的ID /类 - 我通常可以自定义基本的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的样式标签外，你的小提琴很好。摆脱

 <style type="text/css">

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

从JSFiddle重新创建一个简单的轮播滑块

1 个答案: