jquery - 横向显示更多内容？

Question

我正在构建一个单页网站，对于投资组合部分，我将拥有一些项目内容（例如 4 个缩略图），每个项目都将使用 fancybox 显示 html 内容。

所以我想要两个箭头，在每一侧来回显示更多的投资组合内容，但我不确定我应该如何构建它？这是投资组合网站上非常常见的效果，并且在内容发生变化时会发生过渡。

Answer 1

将所有显示元素放在一个中div，然后将其div放在另一个div中。外部div应按您想要的方式调整大小，并具有overflow: hidden风格。穿上position: relative内部div并将其向左或向右移动（动画）外部的宽度div。

Answer 2

你可以使用像延迟加载这样的插件吗？

延迟加载 Jquery

它会水平淡入淡出加载内容:)

或者如果您正在寻找类似旋转木马的东西，请查看这些示例

Answer 3

只是一个快速的免责声明......但这肯定不是最无缝的解决方案。这只是我从头开始针对与您类似的问题提出的快速解决方案。只是众多方法中的一种。

这也是基于这里的功能，但已经被削减了很多：
https ://www.facebook.com/Bio35/app_201742856511228

Javascript（在此之前的标题中需要 jQuery）

$(document).ready(function() {
$.ajaxSetup ({
    cache: false
});

var loadUrl = "scripts/item-loader.php";

page = 1;
total_pages = /* total number of pages, calculated dynamically or otherwise */;
prev_arow = "#left_arrow";
next_arow = "#right_arrow";

$(prev_arow).hide();
$(".hide").hide();

    $(prev_arow).click(function() {
        prev_page = page - 1;
        $("#wrapper"+page).fadeOut("normal", function() {
            $("#wrapper"+prev_page).fadeIn("slow");
        });
        if(prev_page == 1) { $(this).hide(); }
        if(page == total_pages) { $(next_arow).show(); }
        page--;
    });
    $(next_arow).click(function() {
        next_page = page + 1;
        $("#wrapper"+page).fadeOut("normal", function() {
            $("#wrapper"+next_page).fadeIn("slow");
        });
        if(page == 1) { $(prev_arow).show(); }
        if(next_page == total_pages) { $(next_arow).hide(); }
        page++;
    });

    $("#thumbs div div").click(function() {
        var my_id = $(this).attr('id');
        $("#product_wrapper").load(loadUrl, {product: my_id}, function() {});
    });
});

HTML

<div id="product_wrapper">
<!-- display format goes here -->
</div>

<div id="bottom_wrapper">
    <div id="left_arrow">
    </div>
    <div id="thumbs">
        <div id="wrapper1">
            <div id="p1"><!-- thumbnail --></div>
            <div id="p2"><!-- thumbnail --></div>
            <div id="p3"><!-- thumbnail --></div>
        </div>
        <div id="wrapper2" class="hide">
            <div id="p4"><!-- thumbnail --></div>
            <div id="p5"><!-- thumbnail --></div>
            <div id="p6"><!-- thumbnail --></div>
        </div>
        <div id="wrapper3" class="hide">
            <div id="p7"><!-- thumbnail --></div>
            <div id="p8"><!-- thumbnail --></div>
            <div id="p9"><!-- thumbnail --></div>
        </div>
    </div>
    <div id="right_arrow">
    </div>
</div>

在 jQuery 中，"scripts/item-loader.php"基本上是反映与<!-- display format goes here -->HTML 相同格式的 AJAX 文件。它只是检索 的 POST 值product，在 Javascript 结束时的 AJAX 调用中使用，并吐出所选项目的信息。

希望代码足以说明一切。如果您需要澄清，请告诉我。