Question

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

所以我希望有两个箭头，每一边来回显示更多的投资组合内容，但我不确定我应该如何构建它？这对投资组合网站来说是一个非常普遍的影响，然后在内容发生变化时进行转换。

Answer 1

将所有展示元素放在一个div中，并将div放在另一个div中。外部div应按照您希望的方式调整大小，并且样式中包含overflow: hidden。将position: relative放在内div上，然后向外或向右移动它（动画显示）外部div的宽度。

Answer 2

你可以使用像Lazy Load这样的插件吗？

Lazy Load Jquery

它对内容进行水平淡入淡出加载：）

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

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">  </div> <div id="bottom_wrapper"> <div id="left_arrow"> </div> <div id="thumbs"> <div id="wrapper1"> <div id="p1"></div> <div id="p2"></div> <div id="p3"></div> </div> <div id="wrapper2" class="hide"> <div id="p4"></div> <div id="p5"></div> <div id="p6"></div> </div> <div id="wrapper3" class="hide"> <div id="p7"></div> <div id="p8"></div> <div id="p9"></div> </div> </div> <div id="right_arrow"> </div> </div>

在jQuery中，"scripts/item-loader.php"基本上是AJAX文件，它反映了与HTML中相同的格式。它只是检索{J}调用中使用的product的POST值，然后查看所选项的信息。

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

水平显示更多内容？

3 个答案: