Question

我对这一切都很陌生，对于我缺乏术语感到遗憾。

我正在查看this site，我想知道如何在不重新加载页面的情况下更改内容/页面。

有人能指出我正确的方向吗？什么是JavaScript？ CSS过渡？ jQuery的？或者你能告诉我一些代码吗？任何帮助都会很棒;我一直在寻找一段时间找不到类似的东西......

Answer 1

这是一个简单的滑块，而不是幻灯片图片，它滑动内容（嵌套div，img，列表）。我为您检查了代码并使用了 jQuery插件：SudoSlider plugin

不要通过编写自己的插件重新发明轮子，你可以在这里看到一些演示，但this one非常接近使用自动高度的示例。这就是您在网站上使用它的方法：

Jquery的

<script type="text/javascript" >
    $(document).ready(function(){   
        var sudoSlider = $("#slider").sudoSlider();
    });
</script>

HTML

<div id="slider" >
    <ul>
        <li><div> .... </div></li>
        <li>Lorem ipsum text + image</li>
        <li>List, maps, ...</li>
    </ul>
</div>

Answer 2

这是JQuery animation。这是一个（非常漂亮但仍然）典型的旋转木马效果，你有一个滑块div延伸到可见屏幕之外，它的左边距是动画的，以创建效果。

创建基本效果很简单（当然，创建看起来与链接一样好的东西的工作很多）：

将overflow-x: hidden设置为容器div
在容器内添加滑块div，并在滑块内滑动元素
添加导航按钮，然后单击为滑块左侧偏移设置动画（跟踪当前位置）

Here's a really basic example.

Answer 3

我可以说可以使用所有提到的选项：）

基本上你可以使用类似http://bxslider.com/之类的东西来实现你想要的东西而不是使用列表项中的img元素来使用一些内容项。

如何进行页面/内容转换

3 个答案:

Jquery的

HTML