横向显示更多内容？答案

【问题标题】：Display more content horizontally?横向显示更多内容？
【发布时间】：2012-11-21 22:12:20
【问题描述】：

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

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

【问题讨论】：

功能类似这样？ facebook.com/Bio35/app_201742856511228
是的，完全正确。这是使用 jQuery 完成的吗？
@zefs 是的，它是用 jQuery 构建的（和 AJAX 在选择“缩略图”时动态加载内容）。我会在几秒钟内发布答案。

标签： jquery html transition horizontal-scrolling

【解决方案1】：

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

这也是基于这里的功能，但已经精简了很多：
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" 基本上是反映与 HTML 中的 相同格式的 AJAX 文件。它只是检索 product 的 POST 值，在 Javascript 末尾的 AJAX 调用中使用，然后输出所选项目的信息。

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

【讨论】：

谢谢，我会尽快尝试，测试后会在这里发布。
希望它对您有用，并且是您所追求的。如果我现在有更多时间，我会为您构建一个工作 JSFiddle...
嘿迈克，你认为我们可以修改一下代码吗：当没有更多的 div 包装器可以去滚动/淡入淡出被禁用时？现在我更改了代码，使箭头始终可见，所以出现了这个问题。谢谢！
@zefs 正如我写的那样，如果我正确理解您的问题，它应该这样设置。它使用total_pages 变量来确定何时隐藏next_arow，然后如果您导航回第一页，它应该隐藏prev_arrow。分别为if(next_page == total_pages) { $(next_arow).hide(); } 和if(prev_page == 1) { $(this).hide(); }。
很高兴你解决了。要动态计算total_pages，您可以使用一个小脚本来计算您拥有的总项目数，然后将其除以每页显示的项目数（当然，四舍五入，就像使用 Math.ceil() 方法在 JavaScript 中）。例如，22 项除以每页 3 项等于 7.33； Math.ciel(7.33) 然后输出 8，这将是您的页数。

【解决方案2】：

将所有显示元素放在一个div 中，然后将div 放在另一个div 中。外部div 的大小应符合您的要求，并在样式中包含overflow: hidden。将position: relative 放在内部div 上，并将其向左或向右移动（动画）外部div 的宽度。

【讨论】：

【解决方案3】：

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

Lazy Load Jquery

它会水平淡化加载内容:)

或者如果您正在寻找类似旋转木马的东西，请查看These examples

【讨论】：