Question

我想用社交媒体图标创建一个小滑块，div将包含4个社交媒体图标，并在两端允许滑动图标的箭头。假设我们在下一个示例中有七个图标，其中4个用箭头可见，其中3个是隐藏的。

    <div class="slider" style="width: 228px;">    
    <img src="http://goo.gl/UvyXCP" />
    <ul>
        <li><img src="http://goo.gl/cfUTR2" /></li>
        <li><img src="http://goo.gl/oRd14R" /></li>
        <li><img src="http://goo.gl/8vusDB" /></li>
        <li><img src="http://goo.gl/3Tgn6o" /></li>
        <li><img src="http://goo.gl/C81toB" /></li>
        <li><img src="http://goo.gl/BPSKS8" /></li>
    </ul>
    <img src="http://goo.gl/fV0g9d" />
    </div>

我需要自动滑动图像，如果需要使用箭头从一个切换到另一个。我试过一个例子，这里是JSFIDDLE，但似乎无效。我认为有一种更容易的方法。

如果有人能帮助我，我会很高兴的！非常感谢！

Answer 1

我为jQuery编写了一个滑动插件，您可能会喜欢它：）

http://www.rosefalk.dk/library/base/index.html

关于自动滑动，您只需添加计时器事件即可。关于我的插件的好处是你可以为它完全编码自己的框架。它并没有神奇地创建任何冗余的盒子（urgh！）：）

小提琴：FiddleURL

$("#test").rSlide({})

var go = "right";
setInterval(function(){
    if($("#test").data("slideData").counter == $("#test").data("slideData").childrenLength-1)
    {
       go = "left";
    }
    if($("#test").data("slideData").counter == 0)
    {
        go = "right";
    }
    $("#test").rSlide({direction:go});
},1000);

如果你想要你可以用$（“＃test”）替换$（“＃test”）。rSlide（{}）。rSlide（{trim：true}）它会将盒子修剪到正确的大小，尽管它可能会也可能不会给出您正在寻找的结果。

此外，如果您使用插件我建议您使用www.greensock.com动画插件，它会比使用jQuery内置的动画功能提供更平滑的补间（如果您添加了绿色插孔，我的脚本会自动检测，它不是先决条件）。

添加$（“＃test”）。rSlide（{direction：“right”}）;任何元素（如按钮）都会使滑块向右滑动。记得先停止自动滑动：）

修改：暂时删除概述

使用jQuery构建滑动图像

1 个答案: