jquery - 为内容而不是图像创建水平滚动

Question

我想知道如何使用CSS定位和 float 来实现内容 slider 效果。

例如，我不想让菜单链接到页面，而是想禁用链接行为，而是让页面内容看起来水平滑动(向左或向右)，以产生旧内容离开屏幕和新内容离开屏幕的效果出现在屏幕上？

这个效果是如何实现的？

与链接到多个页面相比，在一个页面上显示内容是否也有任何 SEO 优势或劣势？

谢谢，瑞克

编辑:这个问题已经过修改，看起来不太具体，因此对整个社区更有用。

Answer 1

首先，您应该将 <h2>在 .sliders 类之外。

您可以将以下样式添加到 div:

<div class='container'>

    <div class='sliders'>
        <div class='panel' id='home_slider'></div>
        <div class='panel' id='portfolio_slider'></div>
        <div class='panel' id='contact_slider'></div>
    </div>

</div>

那么你的样式将是:

.container{
   width:960px;
   overflow:hidden;
   position:relative;
}

.sliders{
   float:left; 
   width:10000px;
   position:relative;
   left:0; top:0;
}

.panel{
   float:left;
   width:auto; /*You can define a width for this if required*/
   margin:20px;
}

您必须更改上面的值以满足您的要求，但这一切的要点是“.container”类作为一个层，在其下面是“.sliders”类，其中包含所有'.panels' div。通过在 'container' 上设置 'overflow:none'，可见的 '.sliders' 宽度与 '.containers' 的可见区域保持相同，无论 '.sliders' div 有多大。 '.sliders' div 的宽度将根据您内部的 div 数量进行扩展(如果您将宽度设置为自动)然后您只需要使用一些 JQuery 来为 '.sliders' 类的左侧位置设置动画。

希望这对您有所帮助。