3

我想用社交媒体图标创建一个小滑块，该 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，但似乎不起作用。我认为有一种更简单的方法来实现它。

如果有人可以在这里帮助我，我会很高兴！非常感谢！

4

1 回答 1

1

我为 jQuery 写了一个滑动插件，你可能会喜欢它:)

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

关于自动滑动，您可以简单地添加一个计时器事件。我的插件的好处是你可以完全为它编写自己的框架。它不会神奇地创建任何冗余框（呃！）:)

小提琴：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").rSlide({}) 替换为 $("#test").rSlide({trim:true}) 它会将框修剪到正确的大小，尽管它可能会或可能会不给出你正在寻找的结果。

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

添加 $("#test").rSlide({direction:"right"}); 任何元素，如按钮，都会使滑块向右滑动。记得先停止自动滑动:)

编辑：暂时删除概述

于 2013-10-02T12:54:19.837 回答