使用 jQuery 构建滑动图像

Construct sliding images using jQuery

本文关键字：图像 构建 jQuery 使用      更新时间：2023-09-26

我想创建一个带有社交媒体图标的小滑块，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，但似乎不起作用。我认为有一种更简单的方法可以做到这一点。

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

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

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

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

小提琴

：小提琴网址

$("#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"}(; 添加到任何元素(如按钮(将使滑块向右滑动。记得先停止自动滑动:)

编辑：暂时删除概述

相关文章：